Add Product Hover Effect (Image or Video) - Shopify Debut Theme
In this video, I teach you how to implement a hover effect for your Shopify products on collection pages and the featured collection section. This customization uses product metafields and doesn't require any apps. In the video, I am using the debut theme, but the same method will probably works (with a few tweaks) on many themes.
If you have any trouble implementing the code in this video, leave a comment and I will help you as best I can!
More Debut Feature Tutorials: • Shopify Debut Coding Tutorials
Connect with me: / will-misback
Don't @ me: / ecomoverlord
Email me: [email protected]
My Latest Shopify Tips & Tricks: https://wmiz.github.io/mastering-shop...
Code from video:
.product-card: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;
}
.product-card:hover .hidden {
z-index: 100000;
opacity: 1;
}
Timestamps:
0:00 Intro
0:31 Adding Metafields
2:35 Generating .gif from .mp4
4:54 Fixing broken gifs
5:57 Coding Commences
11:35 Feature Demonstration