<div class="mosaic">
	<div class="grid one-fourth imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
	<div class="grid one-fourth imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
	<div class="grid one-fourth imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
	<div class="grid one-fourth last imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" class="noright" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
	<div class="clear"></div>
		<div class="grid one-fourth imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
	<div class="grid one-fourth imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
		<div class="grid one-fourth imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
	<div class="grid one-fourth last imgcontain">
		<img src="https://i.imgur.com/HwGGQMm.jpg" alt="This is the alt for the image" class="noright" />
		<div class="hoverdiv">
			<h2>This is text here.</h2>
		</div><!-- End Hover Div -->
	</div><!-- End Img holder -->
	<div class="clear"></div>
</div><!-- End Mosaic -->

@Green: #66b9b5;
img{width: 100%;}
.grid {margin-right: 2%; margin-top: 1%; float: left; display: inline; position: relative;}
.last { clear: right; margin-right: 0!important; }
.one-fourth { width: 23.4%; }


.mosaic{
  width: 100%;
  position:relative;
 img{margin-top:2%;}
 .hoverdiv{
    position: absolute;
    z-index: 1;
    display:none;
    top: 5px;
    left: 0px;
    text-align: center;
    font-size: 28px;
    height: 335px; /*height of the image */
    width:100%;
    background-color: @Green;
    h2{padding-top: 78px;}
 }
}

$(document).ready(function(){
	$(".imgcontain").mouseover(function() {
		$(this).children(".hoverdiv").show();
	});
	$(".imgcontain").mouseout(function() {
		$(this).children(".hoverdiv").hide();
	});
});