JSFiddle - React, Tailwind, and code Playground

by Евгений Беляков

HTML

<div class="img-overlay"><img src="https://www.joomla.org/images/logos/Vertical/PNG/Joomla%20Logo%20Vert%20Color%20FLAT.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:#f00; text-align:center; line-height:300px;
transition: opacity 0.5s; opacity:0;}
.img-overlay:hover:after {transition: opacity 0.5s; opacity:1;}
.img-overlay:hover img {
-webkit-filter:grayscale(90%) brightness(0.5) 
drop-shadow(0 0 1px #0f0)
drop-shadow(0 0 1px #0f0)
drop-shadow(0 0 1px #0f0)
drop-shadow(0 0 1px #0f0)
;
filter: grayscale(90%) brightness(0.5) drop-shadow(33px 33px 20px #0f0) 
drop-shadow(0 0 1px #0f0)
drop-shadow(0 0 1px #0f0)
drop-shadow(0 0 1px #0f0)
drop-shadow(0 0 1px #0f0)
;
}