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

Highlighted
New Member
5 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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 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
Highlighted