How To Show Second Image In BigCommerce At Cardhover

Let’s discuss Show the second image in BigCommerce at cardholder.

In this blog, We show the Second product image when hover over the product card and Your site will look more Effective than before. It works on any page like Home page, Product page, Category list and Grid view, Featured Product, Latest Product etc.

Steps to add Second image on product card:

Edit File path like : ..\templates\components\products\card.html

Find the below code:
<img class=”card-image lazyload” title=”{{image.alt}}” src=”{{cdn ‘img/loading.svg’}}” alt=”{{image.alt}}” data-sizes=”auto” data-src=”{{getImage image ‘productgallery_size’ (cdn theme_settings.default_image_product)}}” />

Now insert the below code after above code:

{{#each (limit images 2)}}{{#if @index ‘<‘ 0}}<img src=”{{getImage this ‘productgallery_size’ (cdn theme_settings.default_image_product)}}” alt=”{{this.alt}}” title=”{{this.alt}}” class=”second-img”>{{/if}}{{/each}}

After Edit file your code look like:

How to show second Product image in BigCommerce at cardhover

.card-figure:hover .second-img {
opacity: 1;
}
.card-figure .second-img {
top: 0;
left: 0;
margin: 0 auto;
opacity: 0;
position: absolute;
right: 0;
transition: all .4s ease-in-out 0s;
-webkit-transition: all .4s ease-in-out 0s;
-moz-transition: all .4s ease-in-out 0s;
-o-transition: all .4s ease-in-out 0s;
-ms-transition: all .4s ease-in-out 0s;
}
.card-figure {
position: relative;
overflow: hidden;
}