Header glitch... Hovering a product in the collections, is covering the header

Solved
Tourist
5 0 1

Hey everyone!

Recently I found a tutorial in the Shopify Help Center, which explained how to
"Add a hover effect to product images on the collection page".
I linked the tutorial above so you can see what exactly I did to implement it.

Everything works perfectly, when I hover over a picture in the collection page now, I can now see a hover effect and have a different image!
HOWEVER, when I hover a product and this hover image appears, it overrides the header when I scroll down while hovering the image and looks pretty glitchy.

Here you can see the issue yourself, made a screenshot of it.
The left one is the regular picture, and the right one is the picture when you hover over it.


Hope anyone of you smart people knows a way to fix this :)

0 Likes
Shopify Partner
36 7 34

Hi, if you can send me a link to your store I can check this. It's usually a z-index issue which means the new image is told to display above all other element on the page.

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
1 Like
Tourist
5 0 1

Hey, thanks for your effort!

Link to my collection page.

0 Likes

Success.

Shopify Partner
36 7 34

Hi,

When you added this feature you added a css class that looked like this in your theme.scss

 

.reveal:hover .hidden {
    z-index: 100000;
    opacity: 1;
}

If you change it to this 

 

.reveal:hover .hidden {
    z-index: 1;
    opacity: 1;
}

It should solve your issue.

 

Thanks,

Ken.

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
1 Like
Tourist
5 0 1

You are a god, thanks! 

Just to understand that further, why would you create a z-index which such a huge value in the first place?
Why didn't the creator of the code just use value 1 too?

1 Like
Highlighted
Shopify Partner
36 7 34

Haha, no problem. 

 

I see it all the time in web development a z-index that looks like "23423423" or "1000000" it's just a way of trying to make it cover everything but it really is bad practise. 

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
1 Like