Return to previous page

How can i add the CSS diagonal effect to Product images

This topic has 2 replies, 2 voices, and was last updated 7 years ago ago by Rose Tyler

bantanaaudio

Participant

November 20, 2017 at 09:29

Hello, I love the CSS diagonal shine effect that appears on the product category images. I would like add this shine effect to product image on all product pages. What CSS would I use to do this? I want it to be an onload effect.

#178012 Copied Theme version: Version: 5.6 WooCommerce version: Newest

1 Answer

Rose Tyler

Support staff

November 20, 2017 at 10:19

Hello,

Please try to add this code in Theme Options > Styling > Custom css:

.content-product .product-image-wrapper:before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 120%;
    height: 100px;
    background: rgba(255, 255, 255, 0.3);
    content: '';
    -webkit-transition: -webkit-transform 0.9s;
    transition: transform 0.9s;
    z-index: 1;
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
 .content-product .product-image-wrapper {
    overflow: hidden;
}
.content-product:hover .product-image-wrapper:before {
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 400%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 400%, 0);
}

Regards

#178028 Copied