text box slide out
HTML
<div class="body-div" id="body-area">
<div class="div-display" id="why">
<img src="images/framework/whypic.jpg" id="why-pic">
<div class="textbox" id="why-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="div-display" id="what">
<img src="images/framework/whatpic.jpg" id="what-pic">
<div class="textbox" id="what-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="div-display" id="how">
<img src="images/framework/howpic.jpg" id="how-pic">
<div class="textbox" id="how-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
CSS
.div-display {
width: 940px;
height: 175px;
margin-bottom: 10px;
}
.div-display img {
width: 330px;
height: 175px;
float: left;
}
.textbox {
max-width: 610px;
padding: 10px;
top: 0;
bottom: 0;
display: none;
overflow: hidden;
background: linear-gradient(to bottom, rgba(5, 58, 24, 0.65) 10%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0) 100%);
border-radius: 0 10px 10px 0;
}
.textbox p {
font-weight: bold;
font-size: 18px;
}
#how {
margin: 0;
}
JavaScript
$(document).ready(function () {
var options = { easing: "easeInCirc", duration: 1000 };
$('.div-display').hover(function () {
$(this).find('.textbox').stop().show(options);
}, function () {
$(this).find('.textbox').stop().hide(options);
});
});