JSFiddle - React, Tailwind, and code Playground

HTML

<!--feature widget-->
    <article class="large red clearfix">
        <div class="hover"><p><a href="#">Read More</a></p></div>
        
        <div class="content">
            
            <p class="meta">
            <span class="likes"><b>32</b>likes</span>
            <em>From Great Britain</em> 
            <strong>Featured</strong>
        </p><!--//likes-->
                        
        <img src="http://pageaffairs.com/sp/fff.jpg" alt="" class="" />
        
        <h3>our london fashion week insider report!</h3>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla justo ante, eleifend at eleifend et, semper vel mauris. In sodales est ac neque lobortis gravida. Nullam quam ipsum, tincidunt id ultricies non, volutpat nec felis. Mauris lorem est, lacinia nec fringilla sit amet, porta eu nibh. Proin ipsum libero, blandit ut bibendum quis, dignissim et dolor. Quisque euismod mauris eget mi malesuada varius. </p>
        
        <!--<a href="#" class="read-more">read more</a>-->
        </div><!--//content-->
    </article><!--//large-->
    <!--//feature widget-->

CSS

.large, .medium{
    width: 460px;
    position: relative; /*added*/
    float: left;
    margin: 0 5px 20px 0;
    background: #fff;
}

.content {
    border-top: 3px solid #db262d;
}

.large .hover, .medium .hover {
  display: none;
  position:absolute;
  z-index: 2;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  top: 50%;
} /*added*/

.medium{
    width: 220px;
    background: #fff;
}

.hover a{
    display: block;
    background: url(http://dummyimage.com/145/ffffff/ffffff.jpg) no-repeat;
    width: 145px;
    height: 145px;
    text-indent: -9999px;
    margin: 0 auto;
}

JavaScript

$(function() {
  $(".large, .medium").hover(
    function() {
      $(this).children(".content").fadeTo(200, 0.5).end().children(".hover").show();
      },
      function() {
        $(this).children(".content").fadeTo(200, 1).end().children(".hover").hide();
      })      
      .each( function( index, item ) {
         var hover = $(this).find('.hover');
      var top = Math.round( ( $(this).find('.content img').outerHeight() - hover.outerHeight() ) / 2);
      hover.css('top', top + 'px');
      
         
  });
});