JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="posts">
  <a href="#">
    <h2 class="postname"> 
         Travel Flashback #1 </h2>
  </a>
  <a class="img-hover" href="#">
    <img width="960" height="720" src="http://.." class="img-hover" alt="" />
  </a>
</div>

CSS

.item:after {   
    height:200px;
    width:200px;
    background:red;
  opacity: 0;
  -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opactiy 1.5s ease-in-out;
  -ms-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}

.item:after:hover {
    zoom: 1;
    filter: alpha(opacity=50);
  opacity: 1;
  -webkit-transition: opacity 1.5s ease-in-out;
  -moz-transition: opactiy 1.5s ease-in-out;
  -ms-transition: opacity 1.5s ease-in-out;
  -o-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}