CSS; How to make Image hover transition effects for both on AND “off” hover?

Question

I'm editing a Shopify eCommerce theme and I want to achieve this little "hover" effect on images (scroll down to products, and hover over a product image)

I followed a tutorial on Shopify, and it said to implement this CSS:

 /* =============================================== // 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; } 

This code snippet worked, and the result was something like this

Can you see the difference? It's like when you move your mouse away there is no transition . I know it's possible to do because I can see it on the first link, but how? Please help

Answer 1

Just remove the z-index: -1 and it will work.

The z-index was hiding the hover image behind the main image instantly so the animation is not working properly that way. Since the hover image have an opacity there is no need to have z-index: -1 in this case.