JSFiddle - React, Tailwind, and code Playground

HTML

<div class="medium">
  <div class="hover"><p><a href="#">Read More</a></p></div>
    <div class="content">        
      <img src="http://dummyimage.com/250x350/000/fff.jpg" alt="">   
  </div>
</div>

CSS

.large, .medium{
  position: relative;
  width: 460px;
  cursor: pointer;
}

    .medium{
        width: 250px;
        
    }
    
.large .hover, .medium .hover {
  display: none;
  position:absolute;
  z-index: 2;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  top: 50%;
  background-color:red;
  
}

JavaScript

$(function() {
  $(".large, .medium").hover(
    function() {
      $(this).children(".content").fadeTo(1000, 0.25).end().children(".hover").show();
      },
      function() {
        $(this).children(".content").fadeTo(1000, 1).end().children(".hover").hide();
     });
  });