JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="block-container">
    <img src="http://zornet.ru/_ld/83/15262124.png" />
    <div class="block-front"><span>ZORNET.RU</span></div>
</div>
<div class="block-container">
    <img src="http://zornet.ru/_ld/83/08830581.png" />
    <div class="block-front"><span>ZORNET.RU</span></div>
</div>
<div class="block-container">
    <img src="http://zornet.ru/_ld/83/77995051.jpg" />
    <div class="block-front"><span>ZORNET.RU</span></div>
</div>

CSS

.block-container {
         position: relative;
         float: left;
         margin: 2px;
     }
     
     .block-container,
     .block-container div,
     .block-container img {
         width: 150px;
         height: 150px;
     }
     
     .block-container div,
     .block-container img {
         position: absolute;
     }
     
     .block-container img {
         z-index: 1000;
     }
     
     .block-front {
         z-index: 1001;
         background-color: black;
         transition: all 0.4s ease-in-out 0s;
         opacity: 0;
         color: white;
         cursor: pointer;
     }
     
     .block-front:hover {
         opacity: .5;
     }
     
     .block-front span {
         display: block;
         font-weight: bold;
         padding: 60px 0;
         text-align: center;
     }