Solved

How to disable second image on Hover (Dawn theme)

Shiyuka
New Member
6 0 0

Hello, I need some help 🙂 
I already disable on collection settings, when I move my mouse over the product, it shows me a white background.
If I enable it, it show the second image

I just want to disable it and only see my product first image 

Accepted Solution (1)
GemPages
Shopify Partner
5587 1261 1192

This is an accepted solution.

@Shiyuka 

 

Please update again with the code below:

 

<style>
@media screen and (min-width: 990px){
  .product-recommendations .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child){
     opacity: 1 !important;
  }
   slider-component ul.product-grid .card-wrapper:hover .media.media--hover-effect > img:first-child{
     opacity: 1 !important;
  }
  .product-recommendations .media.media--hover-effect>img+img {
    opacity: 0 !important;
  }
}
</style>

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 12 (12)

suyash1
Shopify Partner
8988 1117 1466

@Shiyuka - please share this product page link

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Shiyuka
New Member
6 0 0
suyash1
Shopify Partner
8988 1117 1466

@Shiyuka - which product giving issue?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Shiyuka
New Member
6 0 0

All, when you put ur mose over, white overlay appear

 

suyash1
Shopify Partner
8988 1117 1466

@Shiyuka - not visible

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Shiyuka
New Member
6 0 0

On the main page, when you put your mouse on image (one of product) and don't click
the hover effect is here and just put white image

GemPages
Shopify Partner
5587 1261 1192

Hello @Shiyuka 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you:

1. Go to Online Store -> Theme -> Edit code:

 

GemPages_0-1669618959296.png

 

2. Open your theme.liquid theme file

3. Paste the below code before </body>:

 

<style>
@media screen and (min-width: 990px){
  .product-recommendations .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child){
     opacity: 1 !important;
  }
  .product-recommendations .media.media--hover-effect>img+img {
    opacity: 0 !important;
  }
}
</style>

 

Result: 

 

Screenshot at Dec 10 01-05-13.png

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Shiyuka
New Member
6 0 0

Hello, I put here the code

Screenshot_1.png
But it still the same 
Screenshot_2.png

GemPages
Shopify Partner
5587 1261 1192

This is an accepted solution.

@Shiyuka 

 

Please update again with the code below:

 

<style>
@media screen and (min-width: 990px){
  .product-recommendations .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child){
     opacity: 1 !important;
  }
   slider-component ul.product-grid .card-wrapper:hover .media.media--hover-effect > img:first-child{
     opacity: 1 !important;
  }
  .product-recommendations .media.media--hover-effect>img+img {
    opacity: 0 !important;
  }
}
</style>

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Shiyuka
New Member
6 0 0

Thanks, it's working, i don't have the hover effect no more 

AquaBaby
Tourist
8 0 0

hello, i have the same problem and this code don't work:

www.aquababy.cl 

Aqua Baby
cbradley3005
Visitor
1 0 0

Hi! I've done this on my website and it's worked for the products page, but on my homepage I have a featured products section, and this still shows the second image. What code do I need to add to stop this happening too?