Support Center Visit Demo License manager Buy @ envato

Add a rotation effect to products

SENAPEstudioSENAPEstudio
in WooCommerce

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.

immagine.png


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

I look forward to yours


Thanks

Comments

  • SENAPEstudioSENAPEstudio

    link here https://vegfather.com/shopppy/

  • PhilPhil

    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

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • SENAPEstudioSENAPEstudio

    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?

    immagine.png


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

    immagine.png

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

    immagine.png


    I look forward to yours


    Thanks

  • PhilPhil

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

    image.png

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

    .pswp__bg{
   opacity: 0.5!important;
}

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • SENAPEstudioSENAPEstudio

    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)

    immagine.png

    I look forward to yours

    Thanks

  • PhilPhil

    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

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • SENAPEstudioSENAPEstudio

    No problem!

    Thank you!!!

  • SENAPEstudioSENAPEstudio

    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...

    immagine.png


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

    I'm waiting.

    Thanks for your help!

  • PhilPhil

    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

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • SENAPEstudioSENAPEstudio

    thank you!

  • SENAPEstudioSENAPEstudio
    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)...

    image.png


    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?

    image.png



    THX for your support

    https://vegfather.com/shop/

  • PhilPhil

    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

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • SENAPEstudioSENAPEstudio
    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?

    image.png


    Thx for your support

  • PhilPhil

    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

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • SENAPEstudioSENAPEstudio

    THX!

    How can we edit files to achieve that?

  • PhilPhil

    We do not provide help with file customization.

    With that, you should contact your web developer.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.