CodePen

HTML

            
              <!DOCTYPE HTML>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>ICE - Case Studies</title>
</head>
<body>
<div id="content-wrap" class="page">
	<div id="content" class="block-page">
	<div id="case-study-container">
	    <div class="case-study" id="case-study1">            
	        <a href="#"><img src="http://iceukltd.com/wp-content/themes/ies/images/case-studies/thumbs/1.jpg" alt="example"/></a>
	        <div class="box" style="display:none;">
	            <h2>ConocoPhillips</h2>
	            <p>PLQ Upgrade</p>       
	        </div><!-- end box -->
	    </div><!-- end case-study -->
	    
	    <div class="case-study" id="case-study2">            
	        <a href="#"><img src="http://iceukltd.com/wp-content/themes/ies/images/case-studies/thumbs/1.jpg" alt="example"/></a> 
	        <div class="box" style="display:none;">
	            <h2>ConocoPhillips</h2>
	            <p>PLQ Upgrade</p>       
	        </div><!-- end box -->
	    </div><!-- end case-study -->
	    
	    <div class="case-study last" id="case-study3">            
	        <a href="#"><img src="http://iceukltd.com/wp-content/themes/ies/images/case-studies/thumbs/1.jpg" alt="example"/></a> 
	        <div class="box" style="display:none;">
	            <h2>ConocoPhillips</h2>
	            <p>PLQ Upgrade</p>       
	        </div><!-- end box -->
	    </div><!-- end case-study -->
	    
	    <div class="case-study" id="case-study4">            
	        <a href="#"><img src="http://iceukltd.com/wp-content/themes/ies/images/case-studies/thumbs/1.jpg" alt="example"/></a> 
	        <div class="box" style="display:none;">
	            <h2>ConocoPhillips</h2>
	            <p>PLQ Upgrade</p>       
	        </div><!-- end box -->
	    </div><!-- end case-study -->
	    
	    <div class="case-study" id="case-study5">            
	        <a href="#"><img src="http://iceukltd.com/wp-content/themes/ies/images/case-studies/thumbs/1.jpg" alt="example"/></a> 
	        <div class="box" style="display:none;">
	            <h2>ConocoPhillips</h2>
	            <p>PLQ Upgrade</p>       
	        </div><!-- end box -->
	    </div><!-- end case-study -->
	    
	    <div class="case-study last" id="case-study6">            
	        <a href="#"><img src="http://iceukltd.com/wp-content/themes/ies/images/case-studies/thumbs/1.jpg" alt="example"/></a> 
	        <div class="box" style="display:none;">
	            <h2>ConocoPhillips</h2>
	            <p>PLQ Upgrade</p>       
	        </div><!-- end box -->
	    </div><!-- end case-study -->
	</div><!-- end case-study-container--> 
	</div><!-- end content -->
</div><!-- end content-wrap -->
</body>
</html>
            
          
!

CSS

            
              #case-study-container {
  width: 890px;
	margin: 0 auto;
}

.case-study {
	cursor: pointer;
    overflow: hidden;
    width: 275px;
    height: 209px;
    position: relative;
    border: 3px solid #ebe7e8;
    display: block;
    float: left;
    margin: 0 20px 20px 0;
}

.box {
	width: 245px;
	height: 60px;
	position: absolute;
	margin-top: -97px;
	background-color: black;
	opacity: 0.85;
	padding: 15px;
}

.box h2 {
	font-size: 24px;
	color: #f7f8f8;
	margin: 0!important;
}

.box p {
	color: #f7f8f8;	
}

#case-study-container .last {
	margin-right: 0;
} 
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#case-study1').hover(
  function () {
	    $('#case-study1 .box').slideDown(300);
	},
	function () {
	    $('#case-study1 .box').slideUp(300);
	});
$('#case-study2').hover(
	function () {
	    $('#case-study2 .box').slideDown(300);
	},
	function () {
	    $('#case-study2 .box').slideUp(300);
	});
$('#case-study3').hover(
	function () {
	    $('#case-study3 .box').slideDown(300);
	},
	function () {
	    $('#case-study3 .box').slideUp(300);
	});
$('#case-study4').hover(
	function () {
	    $('#case-study4 .box').slideDown(300);
	},
	function () {
	    $('#case-study4 .box').slideUp(300);
	});
$('#case-study5').hover(
	function () {
	    $('#case-study5 .box').slideDown(300);
	},
	function () {
	    $('#case-study5 .box').slideUp(300);
	});
$('#case-study6').hover(
	function () {
	    $('#case-study6 .box').slideDown(300);
	},
	function () {
	    $('#case-study6 .box').slideUp(300);
	});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................