JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div>Example</div>

CSS

div { 
    width: 200px;
    height: 50px;
    background-image: url('http://placekitten.com/200/300/');
    background-repeat: no-repeat;
    background-position: top left; 
}

div:hover {
    background-position: 0 -50px; /* Or if you had just two simple images you could use something like "top left" on the first one and "bottom left" for the second one */
}