Change image on hover

There are many ways to swap an image when a user hovers over it. The fastest and simplest way is explained below.

Pure CSS to swap image on hover

The best way to swap images on hover is to place both images in the same container, with the "rollover" image transparent by default. When the user hovers over the container, the "rollover" image becomes opaque. It is fast loading, easy to implement and works on all browsers.

Hover over this image, to see a rollover image effect in action:

That on-hover rollover effect was achieved purely with CSS & HTML.

Faster loading images and better SEO with SirvDeliver perfectly resized and optimized images with Sirv. Lightning fast global CDN. Serve images from your own domain. Sign up free

How to swap images with CSS

Use the following CSS to swap images on hover:

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

Next, write the HTML. There are two HTML methods for an image hover effect. Either use lazy loading, automatically scaled images or use fixed size images that will be scaled by the browser.

Lazy loading, scaled images

Recommended for most scenarios, this method will lazy load the images and scale them to the appropriate dimensions (responsive), to suit every users device:

<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>

This example links the image to another page on click:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
<div class="figure">
  <a href="https://www.example.com/">
  <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">
  </a>
</div>

Fixed size images

Alternatively, you can specify a variety of differently sized images using srcset. This tells the browser which image to load, depending on the screen size.

The chosen image will be determined by the images you define in the srcset. Images will not be as well scaled but they might load faster because sirv.js is not needed:

<div class="figure">
  <img class="image-main" src="https://demo.sirv.com/hc/Bose-700-a.jpg?w=360" srcset="https://demo.sirv.com/hc/Bose-700-a.jpg?w=720 2x" alt="Demo image 1">
  <img class="image-hover" src="https://demo.sirv.com/hc/Bose-700-b.jpg?w=360" srcset="https://demo.sirv.com/hc/Bose-700-b.jpg?w=720 2x" alt="Demo image 2">
</div>

Swap images with a smart gallery

If your images are organized into folders, you can reference the first two images in a folder, without knowing their file names (thanks to Sirv's smart gallery feature).

Simply append .view?thumb=1 to the folder URL, where 1 is the first image in the folder, alphabetically.

For example, the following URLs will return the 1st and 2nd images from the /hc folder:

https://demo.sirv.com/hc.view?thumb=1 https://demo.sirv.com/hc.view?thumb=2

The full code for creating an image rollover effect with smart gallery image URLs is as follows:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
<div class="figure">
  <a href="https://www.example.com/">
  <img class="Sirv image-main" src="https://demo.sirv.com/hc.view?thumb=1&w=500" data-src="https://demo.sirv.com/hc.view?thumb=1">
  <img class="Sirv image-hover" data-src="https://demo.sirv.com/hc.view?thumb=2">
  </a>
</div>

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

Send us your questions

Did this guide help you to understand how you can use CSS to change an image (on hover) and create a rollover image effect, with Sirv? Please let us know, below.