JSFiddle - React, Tailwind, and code Playground
HTML
<div class="feature_box">
<h2><a href="http://www.flickr.com/photos/odetothebigsea/3954868129/in/set-72157622457713224/">Lorem ipsum dolor <span class="sub_hdr">Sit amet consectetur</span></a></h2>
<a href="http://www.flickr.com/photos/odetothebigsea/3954868129/in/set-72157622457713224/"><img height="317" width="250" alt="" src="http://paulsturgess.co.uk/images/jquery/feature.jpg"/></a>
<p><a href="http://www.flickr.com/photos/odetothebigsea/3954868129/in/set-72157622457713224/">Excepteur sint occaecat cupidatat non proident. Qui officia deserunt mollit anim id est laborum</a></p>
</div>
CSS
.feature_box{
width:250px;
position:relative;
margin:10px 0 20px;
}
.feature_box h2{
background:#001f4d;
padding:10px;
font-size:20px;
margin:0;
font-weight:normal;
font-family:arial,helvetica,sans-serif;
}
.feature_box a, .feature_box h2 a{ text-decoration:none; }
.feature_box h2 a:link, .feature_box h2 a:visited{color:#FFF;}
.feature_box a:hover{ background:none; }
.feature_box a, .feature_box img { display:block; }
.feature_box h2 span.sub_hdr{
display:block;
color:#035ee5;
font-size:12px;
margin:5px 0 0;
font-weight:normal;
}
.feature_box p{
overflow:hidden;
width:100%;
z-index:1;
background: transparent url(http://paulsturgess.co.uk/images/jquery/feature_bg.png) repeat;
font-family: tahoma,verdana,arial,helvetica,sans-serif;
margin:0;
font-size: 12px;
margin: 0 0 10px 0;
line-height:1.5;
}
.feature_box p a:link, .feature_box p a:visited{
width:230px;
color:#FFF;
padding:10px;
}
.feature_box p a:hover{ color:#FFF; }
JavaScript
$(function(){
// Feature boxes text hover effect
$('.feature_box').showFeatureText();
});
// Display the feature box text on hover
$.fn.showFeatureText = function() {
return this.each(function(){
var box = $(this);
var text = $('p',this);
text.css({ position: 'absolute', top: '57px' }).hide();
box.hover(function(){
text.slideDown("fast");
},function(){
text.slideUp("fast");
});
});
}