Return to previous page

Product Hover Effect – Scale - by vincentdv

This topic has 2 replies, 2 voices, and was last updated 4 years, 2 months ago ago by Rose Tyler

  • Avatar: vincentdv
    vincentdv
    Participant
    April 2, 2021 at 13:53

    Hi, I would like to achieve this effect, when I hover over the product, the image will scale a little. I tried adding custom css, but the whole wrapper including the price and basket move.

    Please, contact administrator
    for this information.
    #282300 Copied Theme version: 7.4.2
    1 Answer
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 2, 2021 at 14:00

    Hello,

    Try to use this custom CSS code:

    .products-loop .product:hover img{
    -webkit-transform: scale(1.1) translateY(-4px);
    -ms-transform: scale(1.1) translateY(-4px);
    transform: scale(1.1) translateY(-4px);
}
.products-loop .product img {
    -webkit-transform: scale(1.1) translateY(4px);
    -ms-transform: scale(1.1) translateY(4px);
    transform: scale(1.1) translateY(4px);
    -webkit-transition: .35s cubic-bezier(.25,.46,.45,.94);
    -o-transition: .35s cubic-bezier(.25,.46,.45,.94);
    transition: .35s cubic-bezier(.25,.46,.45,.94);
}

    Regards

    #282302 Copied
  • Viewing 2 results - 1 through 2 (of 2 total)

The issue related to '‘Product Hover Effect – Scale’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme
lazy-placeholder
Minimalist Outfits – WordPress WooCommerce Theme
lazy-placeholder
Photographer – WordPress WooCommerce Theme
lazy-placeholder
Business – WordPress WooCommerce Theme
lazy-placeholder
Electronic Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Architecture – WordPress Theme
lazy-placeholder
Home Decor Store – WordPress WooCommerce Theme
lazy-placeholder
Industrial Power Tools Store – WordPress WooCommerce Theme
lazy-placeholder
Spa – WooCommerce Theme
lazy-placeholder
Kidsstore – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.