Change/swap image on hover

To swap an image when a user hovers over it, the most common and effective method is to place two images in the same container – making the “rollover” image transparent by default. When the user hovers over the container, the “rollover” image becomes opaque.

html:
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
<div class="figure">
  <img class="Sirv image-main" src="https://demo.sirv.com/hc/Bose-700-a.jpg?w=10&colorize.color=efefef" data-src="https://demo.sirv.com/hc/Bose-700-a.jpg">
  <img class="Sirv image-hover" data-src="https://demo.sirv.com/hc/Bose-700-b.jpg">
</div>

css:
<style>
    /*
      Rollover Image
     */
    .figure {
        position: relative;
        width: 360px; /* can be omitted for a regular non-lazy image */
        max-width: 100%;
    }
    .figure img.image-hover {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      object-fit: contain;
      opacity: 0;
      transition: opacity .2s;
    }
    .figure:hover img.image-hover {
      opacity: 1;
    }
</style>