Venture theme hover to see second image and hover for dropdown having issue

ChamanGarg
Explorer
61 0 19

Hello guys, I had implemented the code for the "Hover to see second product image" following a guide on a shopify post.

 

However, it has affected my hover to trigger header megabar menu. Now, even if I am way below the header menu bar, the dropdown of the menu bar gets triggered. I feel this is because of the code that I had added for "Hover to see second product image" which is causing this issue. 

This is the code that I had entered for hover to see second product image request. 

 

 

/* ===============================================
// Reveal module
// =============================================== */

.reveal .hidden { display: block !important; visibility: visible !important;}
.product:hover .reveal img { opacity: 1; }
.reveal { position: relative; }
.reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.reveal:hover .hidden { 
  z-index: 100000;
  opacity: 1;    
}
.reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 100%;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.7);
  font: 13px/1.6 sans-serif;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}
.reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
  .reveal .caption { 
    font-size: 11px; 
  }
}

 

 

 

Can someone please tell me what can I do so that this code does not affect site navigation hover or the megabar menu dropdown?

Any help would be highly appreciated.

Store- sohumretail.myshopify.com

Pass- Chaman@10

 

 

 

0 Likes
Anthony_David_
Trailblazer
221 29 87

Hello @ChamanGarg 

Replace with the below code.

 

#MainContent .reveal .hidden { display: block !important; visibility: visible !important;}
#MainContent .product:hover .reveal img { opacity: 1; }
#MainContent .reveal { position: relative; }
#MainContent .reveal .hidden { 
  position: absolute; 
  z-index: -1;
  top: 0; 
  width: 100%; 
  height: 100%;  
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
#MainContent .reveal:hover .hidden { 
  z-index: 100000;
  opacity: 1;    
}
#MainContent .reveal .caption {
  position: absolute;
  top: 0;  
  display: table;
  width: 100%;
  height: 100%;
  background-color: white; /* fallback for IE8 */
  background-color: rgba(255, 255, 255, 0.7);
  font: 13px/1.6 sans-serif;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
  text-align: center;
  text-rendering: optimizeLegibility;
}
#MainContent .reveal .hidden .caption .centered {
  display: table-cell;
  vertical-align: middle;
}

@media (min-width: 480px) and (max-width: 979px) {
 #MainContent .reveal .caption { 
    font-size: 11px; 
  }
}

 


Let me know if its perfect.

Thanks

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
ChamanGarg
Explorer
61 0 19

Hi @Anthony_David_ ,

Thank you so much for helkping. The hover thing is working fine now.

However, now, the hover to see second image functionality is not working in the header bar.

 

Can you please see as to what I can do so that the hover for dropdown and hover for second image in the mega header bar can work properly together?

0 Likes
Anthony_David_
Trailblazer
221 29 87

@ChamanGarg i was not able to see the hover working on the megamenu. is that something you want to add?

Thanks

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
ChamanGarg
Explorer
61 0 19

Actually the hover for second image was working on the megabar before I replaced the code that you sent.

 

The code has solved the issue of wrong trigger of dropdown but it has removed the functionality of seeing second image on hover from the megamenu which I want to have.

 

The hover to see second image is still working on the collection pages though!

0 Likes
ChamanGarg
Explorer
61 0 19

Hi @Anthony_David_ ,

 

Did you have time to check this?

 

0 Likes