JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div>some text to hover to see an image wich is hidden as you read this
    <img src="http://placehold.it/400x400&text=zi image click it fade away" tabindex="0" />
</div>

CSS

div img {
    position:absolute;
    opacity:0;
    transition:0s 180s;
}
div:hover img:focus {
    opacity:0;
    transition:3s;
    -webkit-transform:rotate(-360deg) scale(0.23);
    -webkit-transform:rotate(-360deg) scale(0.23);
    -moz-transform:rotate(-360deg) scale(0.23);
    -o-transform:rotate(-360deg) scale(0.23);
    -ms-transform:rotate(-360deg) scale(0.23);
    transform:rotate(-360deg) scale(0.23);
}
div:hover img {
    opacity:1;
    transition:0s;
}
div {
    line-height:1.2em;
    font-size:1em;
    color:black;
    transition:0s 180s;
}
div:hover {
    line-height:0;
    font-size:0;
    color:transparent;
    transition:0;
}