JSFiddle - React, Tailwind, and code Playground

by Aleksandr Zidyganov

HTML

<div class="hovr">
    <span class="hovr-h"></span>
</div>

CSS

.hovr {
    display: block;
    margin:auto;
    position: relative;
    top: 40px;
    width: 115px;
    height: 90px;
    border: 2px solid green;
}

.hovr .hovr-h {
    opacity: 0;
    display: block;
    background: url('http://www.sotmarket.ru/d/i/main/b-main-tizer_image-credit.png');
    width: 115px;
    height: 90px;  
    filter:alpha(opacity=0) progid:DXImageTransform.Microsoft.AlphaImageLoader(src=transparent.png, sizingMethod='crop');
}
.hovr:hover .hovr-h {
    opacity: 1;
}
.hovr:hover .hovr-h {
    background:none\0/;
    filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.AlphaImageLoader(src=transparent.png, sizingMethod='crop');
}