Wordpress Elementor Image Border Animation Effect.

Job ID: 32643720

Budget: ₹600 – ₹1,500 INR

Hello. I am working on a wordpress website and using many different widgets in Elementor like image carousel, woocommerce product gallery, best sellers, popular products and so on. I want to add a 30px border around all the images that I use in any widget. Images could be square, rectangle or round.

What I want is to zoom the border out and hide it as the page scrolls over that image. So lets say there is a 30 px border around the image, as page scrolls down, it becomes 15px, 20px, 15px, 10px, 5px and then 0px. But this effect should be ultra smooth.

Most important part is, I want to use this css in all the widgets of Elementor by pasting it in additional css part. I should be able to just change the class name and use the same css on all the widgets in the entire website.
Related categories: JavaScript WordPress CSS HTML Elementor