Product card with multiple thumbnail images (change on mouse hover)

#css #html #coding #webdev

Today, e-commerce is evolving rapidly. Users are lazy to click, that's why most websites implement a feature that displays multiple images without requiring a click on the product link.

User just hover on product and while moving the cursor, the image will change.

When you ask ChatGPT to create features like this, the code you get tends to be complicated and messy, often filled with CSS and JavaScript.

However, I decided to create the simplest CSS-only solution

In this example, I used css classes from ecommerce-ui.com. Just for basic structure, grid and utilities.

<figure class="card shadow overflow-hidden">
     <!-- Gallery start -->
     <div class="product-images">
        <div class="hover-zone zone1"></div>
        <img src="https://placehold.net/1.png" />
        <div class="hover-zone zone2"></div>
        <img src="https://placehold.net/2.png" />
        <div class="hover-zone zone3"></div>
        <img src="https://placehold.net/3.png" />
        <div class="hover-zone zone4"></div>
        <img src="https://placehold.net/4.png" /> 
     </div>
     <!-- Gallery end// -->
     <figcaption class="p-5">
        <h5>Product name </h5>
        <p class="mb-3 mt-2">$199.00</p>
        <button class="btn btn-default"> Add to cart </button>
     </figcaption>
</figure>

In the code above, you can see that we've divided it into four vertical zones (columns), with each column having its own image. All images overlap each other. We simply show or hide them according to the mouse hover on each zone.

Here is simple css

.product-images {
  position: relative;
  height: 260px;
  overflow: hidden;
  cursor: pointer;
}

.product-images img {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Invisible horizontal zones */
.hover-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  z-index: 10; 
  border-bottom:2px solid white; 
}

.zone1 { left: 0; }
.zone2 { left: 25%; }
.zone3 { left: 50%; }
.zone4 { left: 75%; }

.hover-zone:hover ~ img{ opacity: 0; visibility:hidden;  }
.hover-zone:hover + img{ opacity: 1; visibility:visible; }
.hover-zone:hover{ border-bottom-color:blue; }