JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="Element E-1"></div>
<div class="Element E-2"></div>
<div class="Element E-3"></div>

CSS

.Element {
    background-image: url('http://placekitten.com/g/300/300');
    background-repeat: no-repeat;
    
    width: 90px;
    height: 90px;
    margin: 10px;
}


.E-1 { background-position: 0px 0px; }
.E-1:hover { background-position: -90px 0px; }

.E-2 { background-position: 0px -90px; }
.E-2:hover { background-position: -90px -90px; }

.E-3 { background-position: 0px -180px; }
.E-3:hover { background-position: -180px -180px; }