JSFiddle - React, Tailwind, and code Playground

by timssky

HTML

<div class="img-overlay"><img src="http://webarbuz.ru/images/works/kus.png" /></div>

CSS

* {margin:0; padding:0;}
img {width:100%; transition: all 0.5s;}
.img-overlay {position:relative; float:left; width:500px; font-size:0;}
.img-overlay:after {position:absolute; left:0; width:100%; height:100%; content:'привет! я надпись!'; font-size:20px; color:#ffffff; text-align:center; line-height:300px;
transition: opacity 0.5s; opacity:0;}
.img-overlay:hover:after {transition: opacity 0s; opacity:1;}
.img-overlay:hover img {
-webkit-filter:grayscale(100%) brightness(0) opacity(0.1)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
;
filter: grayscale(100%) brightness(0) opacity(0.1)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
drop-shadow(0 0 0 #8F222D)
;
}