How to switch to the second product image when hovering over the mouse?

How To
1

When my mouse hovers over the product module, how can I switch image one to image two, while this product module is calling WooCommerce product information?

2 Likes
2

Same here…nothing that I’ve found yet.

3

Looking for this as well

4

Solution

I had a similar problem. I have a team grid with team members and I wanted to show the first image of the person (in black and white) and on hover a scenario with two options:

a) if there is a second image for this member (a funny one) swap the image on hover
b) if there is only one image for the member (in the case he could not make it to the photo shoot) same image should be shown in color

  1. Setting up the dynamic data images (ACF)
    I set up two images in the field group for the members. If a member has two images, I load two different images in the backend. I f he had only one image, I loaded the same image in the two image slots.

  2. Inside the loop for the member grid I had the following structure:
    DIV
    → image 1 (set with a filter to make it black and white and on hover loose the filter)
    → image 2

both images must have the same dimension.

  1. Classes and CSS on the images
    The first image got the class .mitglieder-img
    This class has the following CSS

%root% {
opacity: 1;
z-index: 2;
display: inline-block;
}

The second image got the class .swap-img
This class has the following CSS

%root% {
opacity: 0;
z-index: 1;
display: none;
}

  1. Class and CSS on the DIV
    On the DIV I set a class and added the following CSS

%root% {
&:hover .mitglieder-img {
opacity: 0;
display: none;
}

&:hover .swap-img {
opacity: 1;
display: inline-block;
}
}

!!! The images swaped but there was a flicker of the content under the image (for the member).

  1. Eager load
    I set the load from lazy to eager on the images and that fixed the flicker problem.

Hope this helps you to solve your problems with this topic in bricks.