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

Store Design
1

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

2

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

1 Like
3

Hi @Anthony_David_1 ,

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?

4

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

Thanks

1 Like
5

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!

6

Hi @Anthony_David_1 ,

Did you have time to check this?