Impulse theme hover effect on promo grid image

Store Design
, , ,
1

Looking to add a hover effect on an image within the promotion grid for the Impulse theme.
Desired effect: When the mouse is hovering over the image the image would switch to an alternate one.

There are two images in the promo grid I need this effect on.

2

In the code editor, navigate to the “Sections” folder and open the “featured-promotions.liquid” file.

Find the HTML code for the image you want to add the hover effect to. It should look something like this:

Add the following code right after the tag:

Add the following CSS code to your stylesheet

/* Hover effect for promotion grid images */
.featured-promotions__item:hover .featured-promotions__image-wrapper {
  display: none;
}

.featured-promotions__item:hover .hover-image-wrapper {
  display: block;
}

.hover-image-wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hover-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}