Return to previous page

Picture rotate on hover in xstore shoppage

This topic has 2 replies, 2 voices, and was last updated 16 hours, 18 minutes ago ago by Luca Rossi

  • Avatar: gewoonbovenaan
    gewoonbovenaan
    Participant
    March 13, 2025 at 11:01

    Hi, i would like to create that a product is rotating on hover like this: https://gyazo.com/6588f309ab060c3725ed2fff453432e3
    but this is not working:
    .et-hover-effects .product-element-top img {
    transition: transform 0.3s ease-in-out;
    }

    .et-hover-effects .product-element-top:hover img {
    transform: rotateY(10deg);
    }
    How can i adchieve this within xstore?

    best regards.

    #437161 Copied
    1 Answer
    Avatar: Justin
    Luca Rossi
    Support staff
    March 13, 2025 at 16:14

    Hi @gewoonbovenaan,

    Please try with this custom CSS code instead:

    
.product-content-image {
    perspective: 1000px;
}

.product-content-image img {
    transition: transform 0.3s ease-in-out;
    transform-style: preserve-3d;
}

.product-content-image:hover img {
    transform: rotateZ(-15deg);
}

    Hope it helps!

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

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Typography – WordPress WooCommerce Theme
lazy-placeholder
Yoga Accessories – WordPress WooCommerce Theme
lazy-placeholder
Corporate – WordPress Theme
lazy-placeholder
Medical 02 – WordPress WooCommerce Theme
lazy-placeholder
Classic Fashion Store (Dark) – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme
lazy-placeholder
Travel – WooCommerce Theme
lazy-placeholder
Spa – 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.