Add a rotation effect to products

Hey guys,

thank you again for your invaluable support!

We would very much like to add a rotation effect to our products, when you hover over with the mouse, the product does a rotation of 5°

Here is the example photo.


I'm not strong with CSS but I think it's possible ...

I look forward to yours


Thanks

Comments

  • Hello,

    Thanks for your kind words. 😊

    Please, try the following code:

    .products .product img:hover{
       transform:rotate(-5deg);
     -ms-transform:rotate(-5deg);
     -webkit-transform:rotate(-5deg);
    }
    

    Thanks

  • Fantastic guys! Is it possible to add the rotation to the product section as well?


    Also I would like the name of the image not to appear, what can I do?


    Last thing, you can change the view once you open the image from how it is now ...

    ...to this? (With 50% opacity of the black background)


    I look forward to yours


    Thanks

  • 1) To remove the name of the image, please, go to Media, find a product image, and remove its title.

    2) For a lightbox background, please, use the following code:

    .pswp__bg{
       opacity: 0.5!important;
    }
    

    Thanks

  • Thank you so much everything perfect!

    We only need the last change, that is to add the rotation when the mouse is over the product image (in the specific product section)

    I look forward to yours

    Thanks

  • Sorry, for missing this part.

    Please, check the following code:

    .single-product .product_image_wrapper img:hover{
       transform:rotate(-10deg);
     -ms-transform:rotate(-10deg);
     -webkit-transform:rotate(-10deg);
    }
    

    Thanks

  • No problem!

    Thank you!!!

  • Hey huys!

    I'm here again, your theme works really well!

    I would like to add an effect together with the rotation, i.e. a 10% zoom

    Like this...


    I would like to add it to both the .product and the .single-product

    I'm waiting.

    Thanks for your help!

  • Please, add the scale attribute to the transform in your custom CSS.

    It should look like this:

    .products .product img:hover{
    transform:rotate(-10deg) scale(1.15);
    -ms-transform:rotate(-10deg) scale(1.15);
    -webkit-transform:rotate(-10deg) scale(1.15);
    }
    

    Thanks

  • edited April 2023

    Hello guys!

    1) on our site we noticed that the rotation effect is no longer as "fluid" as it used to be, often when you go over it with the mouse the rotation starts and returns quickly and remains blocked (it makes a vibration)...


    do you have any solution?


    Maybe a change to the current CSS code...

    2) on the product page, when you go over the image the rotation "cuts" the corners, could you provide us with the code to solve this bad effect?



    THX for your support

    https://vegfather.com/shop/

  • 1) Please try the following one instead:

    .products .product:hover img{
     transform:rotate(-10deg) scale(1.15);
     -ms-transform:rotate(-10deg) scale(1.15);
     -webkit-transform:rotate(-10deg) scale(1.15);
    }
    

    2) Please try this code:

    .single-product div.product div.images img{
     padding: 40px;
    }
    

    Thanks

  • edited April 2023

    Thx!


    1) In the car section there are these 2 buttons that are very large, can they be made smaller so that it will keep a better balance and easier reading? ...Maybe by sending below the green button "applica codice promozionale"

    2) also is it possible to change the icon of the truck? How?


    Thx for your support

  • 1) Please try the following CSS code:

    .woocommerce-cart .actions .button{
     font-size: 16px!important;
     padding-right: 20px!important;
     padding-left: 20px!important;
    }
    

    2) There is no setting to change that. You would have to edit files to achieve that.


    Best regards

  • THX!

    How can we edit files to achieve that?

  • We do not provide help with file customization.

    With that, you should contact your web developer.


    Best regards

Sign In or Register to comment.