Hover Image resize

Hi guys.
Thnx for at great looking theme.

How do I control the size transition of the product hover image.?
I need the hover image to keep the original size, and therefore only transition the opacity.
Or perhaps it could transition from a larger size to the original instead ?

Allso, I would like the same hover image ( i believe it by default is the second product image ) to show as the primary ( default ) product image in the product page.?

Thanks 🙂

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
body .category-grid-item .category-image {
-webkit-transform: none !important;
transform: none;
}
body .product-grid-item .product-element-top:hover .hover-img {
transform: none;
-webkit-transform: none;
}

Best Regards

Thanks… however it was not quite what I was asking 🙂

I lead me to finding the correct CSS changes though.

Here is the CSS to change the resize on hover:
Perhaps you would comment ?

/* Product hover image scale */
.product-grid-item .product-element-top:hover .hover-img {
opacity: 1;
-webkit-transform: scale(1.03); !important
transform: scale(1.03); !important
}

I also have another request.

On my live site, I´m using your Basel theme.
Here the product image changes on hover ( on mobile devices it´s click/drag og first click.)
Please tell me how i can have this effect in the Woodmart theme as well.

Hello,

Please provide the page URL and screen how you want it to be. Basel has a lot of designs on hover and I cannot catch your idea.

Best Regards

Once again – i managed to find a solution 🙂
For some reason, the hover image is hidden on mobile devices ?

This CSS code fixed it.

/* Product hover image show on mobile */
.product-grid-item .hover-img {
display: block; !important
}

Hello,

That is fine. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts