bedava hesaplar nulled scripts mod apk indir youtube mp3 dönüştürücü

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

Sign In or Register to comment.
bedava hesaplar nulled scripts mod apk indir youtube mp3 dönüştürücü