JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div class="hover-img">
    <img...

CSS

.hover-img {
    position: relative;
    width: 200px;
    height: 200px;
}
.hover-img > img {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

.hover-img > .img2 {
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}
.hover-img:hover > .img2 {
    opacity: 1;
}