JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example4">
</div>

CSS

.example4 {
      background: url(https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png) 0px 0px no-repeat;
      position: relative;
      width: 200px;
      height: 200px;
    }
    
    .example4::after {
      content: "";
      background: url(https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png) -200px 0px no-repeat;
      opacity: 0;
      transition: opacity 0.5s;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .example4:hover::after {
      opacity: 5;
      transition: opacity 0.5s;
    }