JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="hover">
    <div class="social">
      <div class="l l-1">в</div>
      <div class="l l-2">фб</div>
      <div class="l l-3">ют</div>
    </div>
  </div>
  <div class="image"></div>
</div>

CSS

.block{
  width:300px;
  height: 400px;
  position: relative;
  margin: 100px;
  cursor: pointer;
}

.image{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
  z-index: 1;
}

.hover{
  background: #f74509; /* Old browsers */
  background: -moz-linear-gradient(top, #f74509 0%, #500adb 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f74509 0%,#500adb 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f74509 0%,#500adb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f74509', endColorstr='#500adb',GradientType=0 ); /* IE6-9 */
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: all .2s ease-in-out;
  display: flex;
  
  justify-content: center;
  align-items: center;
}

.hover:hover{
  opacity: .75;
  margin: -10px 0 0 -10px;
}

.social{
  display: flex;
}

.l{
  box-sizing: border-box;
  padding: 10px;
}

.l-1{
  background: blue;
}
.l-2{
  background: lightblue;
}
.l-3{
  background: red;
}