JSFiddle - React, Tailwind, and code Playground

by Robert N.

HTML

<body>
  <div class="block-container">
    <img src="http://dlgsd.org/wp-content/uploads/c012a9343909c.png" />
    <div class="block-front"><span>Текст на картинке</span></div>
  </div>
  <div class="block-container">
    <img src="http://dlgsd.org/wp-content/uploads/c012a9343909c.png" />
    <div class="block-front"><span>Any text</span></div>
  </div>
  <div class="block-container">
    <img src="http://dlgsd.org/wp-content/uploads/c012a9343909c.png" />
    <div class="block-front"><span>Any text</span></div>
  </div>
</body>

CSS

.block-container {
  position: relative;
  float: left;
  margin: 2px;
}

.block-container,
.block-container div,
.block-container img {
  width: 250px;
  height: 250px;
}

.block-container div,
.block-container img {
  position: absolute;
}

.block-container img {
  z-index: 1000;
}

.block-container:hover img{
  opacity: .4;
}

.block-front {
  z-index: 1001;
  background-color: transparent;
  transition: all 0.4s ease-in-out 0s;
  opacity: 0;
  color: navy;
  cursor: pointer;
}

.block-front:hover {
  opacity: 1;
}

.block-front span {
  display: block;
  font-weight: bold;
  padding: 60px 0;
  text-align: center;
}