Add a rotation effect to products

SENAPEstudio · October 2021

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

SENAPEstudio · October 2021

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

Phil · October 2021

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

SENAPEstudio · October 2021

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

Phil · October 2021

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

SENAPEstudio · October 2021

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

Phil · October 2021

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

SENAPEstudio · October 2021

No problem!

Thank you!!!

SENAPEstudio · November 2021

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!

Phil · November 2021

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

SENAPEstudio · November 2021

thank you!

SENAPEstudio · 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/

Phil · April 2023

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

SENAPEstudio · 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

Phil · April 2023

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

SENAPEstudio · April 2023

THX!

How can we edit files to achieve that?

Phil · April 2023

We do not provide help with file customization.

With that, you should contact your web developer.

Best regards

Add a rotation effect to products

Comments

This website uses cookies