Reply 178028 to: How can i add the CSS diagonal effect to Product images

Avatar: Rose Tyler
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

Go To The Whole Conversation In Topic
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.