JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

<div class="image-slider">
    <div class="image-before">
        <img src="http://i.imgur.com/1oebV2D.png" alt="">
    </div>
    <div class="image-after">
        <img src="http://i.imgur.com/bTrVG20.png"  alt="">
    </div>
</div>

SCSS

img {
    width: 300px;
}

.image-slider {
    display: inline-block;
    cursor: pointer;
    
    .image-before { display: none; }
    .image-after { display: block; }
    
    &:hover {
        .image-before { display: block; }
        .image-after { display: none; }
    }
}