how to add the product hover in veture theme?can any one help us. thanks advance

New Member
2 0 0

snippet>paroduct-card.liquid.

<div class="reveal">
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image">
<div class="hidden">
<img src="{{ product.images.last | img_url: '480x480' }}" alt="{{ product.images.last.alt | escape }}" >

</div><!-- end of .hidden -->
</div><!-- end of .reveal -->

2.In asset>theme.scss.liquid I have below code.

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

0 Likes

Hello 

You mean hover effect on product image?

What you want to display on over effect?

Please share your site url. 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
2 0 0
sit not yet launched so can't share.

https://help.shopify.com/en/themes/customization/collections/add-hover-effect-to-product-images

find above link. we need to achieve same function in our site as well.
0 Likes