Why is the second image hover not working on my Dawn theme?

Shopify Discussion
1

Hi!

My website has been working fine, up until today. There have been several issues, but one I can’t seem to figure out is the second image hover on products. As you can see in the pictures below, the image almost disappears on this home page collection, and then on my Accessories page, the image disappears entirely.

website is: www.zephyrgames.co.uk

Thank you!

ReddHedd_0-1708277578023.png
ReddHedd_0-1708277578023.png2150×1204 284 KB

ReddHedd_0-1708277929080.png
ReddHedd_0-1708277929080.png2190×1196 203 KB

2

Apologies, second image below:

ReddHedd_0-1708277902099.png
ReddHedd_0-1708277902099.png2190×1196 203 KB

3

Hi @ReddHedd . You can change the following code in your component-card.css file.

@media screen and (min-width: 990px) {
  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }
}

Just replace opacity: 0 with opacity: 1

Let us know if you’ve any queries.

4

Hi there.

Unfortunately, this has not worked. As you can see below, a slither of the image is still visible below, and now the second image doesn’t appear on hover.

ReddHedd_0-1708330481364.png
ReddHedd_0-1708330481364.png832×617 144 KB

5

Hi @ReddHedd . Thanks for the reply.

The above could should work.

However, as far as our understanding, what you want is when you hover over an image, you want to show another image of the product.

If you want this behavior, you can update the following code:

@media screen and (min-width: 990px) {
  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }
}

replace above code in your component-card.css with the code below:

@media screen and (min-width: 990px) {
  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
    display: none;
  }
}

As we don’t have access to your code, let us know whether this works for you or not.

6

In the below image, you can see that the second image is hovered.

Capture.PNG
Capture.PNG1751×643 292 KB

7

Hi there,

Thanks again for getting back to me. This did fix the issue.

Perhaps I should’ve been more clear in my original message - apologies. The ‘show second image on hover’ is already an integrated function on Shopify’s Dawn theme. So, I guess my query is, why it’s no longer working - what’s changed…

I’ve logged a support ticket with the Shopify team to see if they can assist.

Apologies again if I have wasted your time. I want to avoid having to apply any more custom code, if possible, to reduce the likelihood of things breaking in future.

All the best.