Disable 2nd hover picture in related products

Store Design
1

Hey, even if I’ve disabled the 2nd picture on hover in the the products page, if I click on a product, the related products below they still have it. Could you help me fix it?

2

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. add code below to bottom of file
.media.media--hover-effect > img + img {
  opacity: 0 !important;
}
.card__media .media img {
	 opacity: 1 !important;
}
3

@MariaMcGraw

Please share your store URL!

Thanks!

4

Hello @MariaMcGraw ,

You can check out my suggestion below to get your concern resolved:

  1. Go to Edit code on Online Store:

GemPages_0-1673323185360.png
GemPages_0-1673323185360.png400×162 25.3 KB

  1. add my code above the tag on Theme.liquid:

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

5

Hi @MariaMcGraw ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.card-wrapper:hover .media.media--hover-effect>img:first-child:not(:only-child) {
    opacity: 1 !important;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
}
.card-wrapper:hover .media.media--hover-effect>img+img {
    opacity: 0 !important;
}

Hope it helps!