You can create a zoom image on hover effect in Elementor using CSS. Here is an example of some CSS code that will create a hover effect that zooms in on an image:
/* Add a zoom effect on hover */
.elementor-image:hover {
transform: scale(1.2); /* increase the scale of the image */
}
/* Add a transition */
.elementor-image {
transition: transform 0.3s ease; /* make the transition smooth */
This code targets the default class that Elementor uses for images, “elementor-image”, and applies the hover effect to it. The transform: scale(1.2); property increases the size of the image by 20% on hover, you can adjust the scale to your desired value. The transition: transform 0.3s ease; makes the transition of the image smooth, you can adjust the duration and timing to your desired value.
You can add this code to your website by going to your WordPress dashboard, navigate to Appearance > Customize > Additional CSS, paste the CSS code there.
Keep in mind that it’s possible to add unique class name to the image element in Elementor editor, so you can style them individually, so you can add a class in the advanced tab in the image module of elementor, then target that class in the CSS.
Please note that this is only an example and the final result might vary based on the context of your website, the CSS classes and selectors used, and other factors. Also, be aware that it may negatively affect the performance of your site if you have a large number of images in the site or have a weak hosting.