Apply Ripple Effect When You Click On Product Images in WordPress

If you are a developer or a WordPress developer Ripple Effect is very useful & simple js/css code to apply on your website.

Here is the image for better understand. This effect needs to be applied on Product image when you click on it. Let’s See the Process.

Ripple Effect

How To Apply on a WordPress Website

If you use any plugin various problems can occur, website may be broken or slow down your page loading speed. So, let’s avoid plugin & simply apply some lines of code.

Go to wordpress dashboard, then hover on appearance and click on Customize. Dashboard > Appearance > Customize

Then you find Custom CSS or Additional CSS Field to write the code. Copy the code below & paste it there. And Publish This.

@media (max-width: 768px) {
.product-img .back-img{
position: relative;
overflow: hidden;
}

.product-img .back-img:after {
content: ”;
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(0, 0, 0, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}

.product-img .back-img:active:after {
animation: ripple .4s ease-out;
}

@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
50% {
transform: scale(50, 50);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(100, 100);
}
}
}