JSFiddle - React, Tailwind, and code Playground

by jeryagus

HTML

<div class="main">

    <div class="view fifth-effect">
         <a href="#" title="Full Image"><img src="https://si0.twimg.com/profile_images/3730594795/9970d771e77719589d89910f4c2798a3.jpeg" /></a>
         <div class="mask"></div>
	</div>     
    
    <div class="view fifth-effect">
         <a href="#" title="Full Image"><img src="http://sphotos-e.ak.fbcdn.net/hphotos-ak-prn2/960134_406610246113277_821863024_n.jpg" /></a>
         <div class="mask"></div>
	</div>     
    
    <div class="view fifth-effect">
         <a href="#" title="Full Image"><img src="http://sphotos-g.ak.fbcdn.net/hphotos-ak-ash3/31080_1177772465038_3288411_n.jpg" /></a>
         <div class="mask"></div>
	</div>     
    
    <div class="view fifth-effect">
         <a href="#" title="Full Image"><img src="https://si0.twimg.com/profile_images/3768845154/e5607d12fe9b103c43b538493948542e.jpeg" /></a>
         <div class="mask"></div>
	</div>                

</div>

CSS

.fifth-effect img {
   opacity:0.2;
   transition: all 0.3s ease-in;
}
.fifth-effect .mask {
   cursor:pointer;
   opacity:1;
   visibility:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
   border:0px double rgba(0,0,0,0.7);
   opacity:0;
   visibility:hidden;
}
.fifth-effect:hover img {
   opacity:1;
}