JSFiddle - React, Tailwind, and code Playground

by surakrai

HTML

<div class="column">
    <img class="back" src="http://placehold.it/200/3cb878/ffffff/&text=image2" />
    <img class="front" src="http://placehold.it/200/0099cc/ffffff/&text=image1" />
</div>

CSS

.column {
    position:relative;
}

.column img {
    position:absolute;
    transition: opacity 0.5s;
}

.column img.front:hover {
    opacity:0;
}