Clipped Image and Teext

by Glynne Turner

HTML

<div style="position:relative;margin-top:20px; overflow:hidden">

<div class="box_holder"> 
<div  id="hover">Reveal Photo</div>
 <img class="image" src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2016/07/forest-example-square.jpg">
 <div class="text">
 This is the text 
 </div>
 </div> 
 </div>
 <div> <div style="position:relative;margin-top:20px">
<div style="position:relative;margin-top:20px; overflow:hidden">
<div class="box_holder"> 
<div  id="hover">Reveal Photo</div>
 <img class="image" src="http://www.abbeyjfitzgerald.com/wp-content/uploads/2016/07/forest-example-square.jpg">
 <div class="text">
 This is the text 
 </div>
 </div> 
 </div>
 <div>

CSS

.image{
  position: absolute;  
  top:0; 
  display: block;
  width:400px; 
  height:200px;
  clip: rect(200px, 0, 0, 400px);
  -webkit-transition: all 0.5s ;
  -moz-transition: all 0.5s  ;
  transition: all 0.5s  ; 
} 
.box_holder{text-align:center; width:400px; height:200px;overflow:hidden }
.box_holder:hover{cursor:pointer}
#hover{ line-height:200px; background-color:#999999;color:#ffffff;width:400px; height:200px;}
 .show{clip: rect(0, 400px, 200px, 0);}
.text{position:absolute; top:200px;  display: block;margin:auto;font-weight:bold; color:#999999; background-color:rgba(250,250,250,.7); padding:15px 30px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 3);
  -webkit-transition: all 0.5s ;
  -moz-transition: all 0.5s  ;
  transition: all 0.5s  ; }
.text.move{top:85px}

JavaScript

var box = $('.box_holder');
box.mouseover(function() {	
	$(this).children(".image").addClass('show');
	$(this).children('.text').addClass('move');
})
box.mouseout(function(){
	$(this).children(".image").removeClass('show');
	$(this).children('.text').removeClass('move');
})