JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="b-pict">
  <img src="http://xsport.ua/upload/news-photos/22-11-2015-oa/Lester.jpg" alt="" />
</div>

CSS

.b-pict{
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.b-pict > img{
  max-width: 100%;
  display: block;
}
.b-pict:before{
  content: '';
  opacity: 0;
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;  
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
-webkit-transform: scale(0.1);
transform: scale(0.1);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.b-pict:hover:before{
  opacity: 1;
  -webkit-transform: scale(1);
transform: scale(1);
}