JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="sld">

  <a href="#" class="cont"><img src="http://lfly.ru/wp-content/uploads/2017/03/40-eda-oboi-kartinki-foto-1920x1080.jpg" alt=""></a>
   <a href="#" class="cont"><img src="http://www.sentidoorkalotusbeach.com/Uploaded/Content/565fb531-3896-4788-9619-bff348df9f71.jpg" alt=""></a>
   <a href="#" class="cont"><img src="http://img-fotki.yandex.ru/get/9507/981986.6b/0_8c526_6085c50b_orig" alt=""></a>
   <a href="#" class="cont"><img src="https://images3.content-hci.com/commimg/myhotcourses/blog/post/myhc_40352.jpg" alt=""></a>
   <a href="#" class="cont"><img src="http://img11.nnm.me/1/5/4/7/2/25a61eac81560934223043628c6.jpg" alt=""></a>
</div>

CSS

#sld{
  width:100%;
  height:200px;
  display:flex;
  flex-direction:row;
}
#sld>.cont{
  height:100%;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}
#sld>.cont:hover::before{
  opacity:1;
  transition:.5s;
}
#sld>.cont::before{
  opacity:0;
  transition:.5s;
  z-index:10;
 content:" ";
 background-color:rgba(0,0,0,0.6);
 background-image: url(http://icon-icons.com/icons2/792/PNG/128/INSTAGRAM_icon-icons.com_65535.png);
 background-repeat: no-repeat;
 background-size:40px;
 background-position:50%;
 width:100%;
 height:100%;
 left:0;
 top:0;
 position:absolute;
}
#sld>.cont>img{
  height:100%;
  position:relative;
  left:-25%;
}