<div class = "container">
	<div class = "row">
		<h1 class = "text-center">Black And White</h1>
	</div>
	 <div class = "grid">
		<div class="grid-sizer"></div>
		<div class = "grid-item">			
			<img src = "http://rack.3.mshcdn.com/media/ZgkyMDEzLzA5LzI0L2RkL2JsYWNrX3doaXRlLmMzY2VjLnBuZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/6088aa87/26c/black_white_thumb.jpg">	
			<div class = "caption"><h2>Hello</h2></div>
			
					
		</div>		
		<div class = "grid-item">
			<img src = "http://media3.popsugar-assets.com/files/2015/08/27/708/n/2589278/76c8507697407135_GettyImages-479456327_masterEMP37T.xxxlarge/i/Theo-James.jpg">
			<div class = "caption"><h2>Some</h2></div>
			
		</div>
		<div class = "grid-item">
			<img src = "https://upload.wikimedia.org/wikipedia/en/2/22/The-Maine-Black-And-White-Artwork.jpg">
			<div class = "caption"><h2>Random</h2></div>
			
		</div>
		 <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
			 <div class = "caption"><h2>Caption</h2></div>
			
  </div>  
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
		<div class = "caption"><h2>Random</h2></div>
			
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
		<div class = "caption"><h2>And</h2></div>
			
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
		<div class = "caption"><h2>Some</h2></div>
			
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
		<div class = "caption"><h2>Image</h2></div>
		
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
		<div class = "caption"><h2>For</h2></div>
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
		<div class = "caption"><h2>You</h2></div>
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
		<div class = "caption"><h2>Guys</h2></div>
  </div>
	</div>
	<div class = "row">
		<p class = "text-center">Created using: <a href= "https://masonry.desandro.com/" target = "_blank">Masonry</a>.</p>
		<p class = "text-center">View their Codepen's example <a href= "https://codepen.io/desandro/pen/bdgRzg" target = "_blank">here</a>.</p>
	</div>

	
</div>

* { box-sizing: border-box; }

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-bottom: 1em;	
	cursor: pointer;
}

.grid-item:after {
	position: absolute;
	content: "";
	top: 0; bottom: 0;
	left: 0.5em; right: 0.5em;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	transition: opacity 0.4s ease-in-out;	
}

.grid-item:hover:after {
	opacity: 1;
}

.grid-item .caption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	z-index: 1;
}

.grid-item:hover .caption {
	opacity: 1;
}

.grid-item img {
  display: block;
  max-width: 100%;
	-webkit-filter: grayscale(1);
}

.row {
	margin: 20px auto;
}

h1, h2, p {
	font-family: "Lato";
}

h1 {
	font-weight: 700;
	text-transform: uppercase;
}

a {
	font-weight: 700;
}

var $grid = $('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true	
})

$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});