JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="zornet_redsan" style="background:url(http://zornet.ru/Ajaxoskrip/Aabger/9i0ngp.png) no-repeat 50% 50%;">
	  <a href="#"><div class="sarumib">
	    <span class="dertunem"><img src="http://zornet.ru/Ajaxoskrip/Aabger/FERT-77.png"></span>
	  </div></a>
	</div>

CSS

.zornet_redsan { 
    border:1px solid rgba(204, 198, 198, 0.97);
    padding:5px;
    height:182px;
    width:195px;
    margin:10px;
}
.sarumib {  
    background:rgba(0, 0, 0, .75);
    text-align:center;
    opacity:0;    
    width:100%;height:100%; 
    -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.49, 0.96);
    -moz-transition: all 0.3s cubic-bezier(0.42, 0, 0.49, 0.96);
    -o-transition: all 0.3s cubic-bezier(0.42, 0, 0.49, 0.94);
    -ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.54, 0.97);
    transition: all 0.3s cubic-bezier(0.42, 0, 0.46, 0.92);
}
.zornet_redsan:hover {
    border:1px solid rgba(90, 88, 88, 0.95);
    border-radius:5px;
}
.zornet_redsan:hover .sarumib {
    opacity:1;
}
.dertunem {
    position:relative;
    top:71px;
}