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> 

    <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> 

    <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");
        });
    });
}