In place hover animation on gallery images

Hi,
We have a image gallery in About us page from the grocery demo

the page can be accessed at
https://prabhushriram.transilience.tech/about-us-2/

The images are currently laid out in a masonry grid with 3 images.

We would like to add a hover animation

we tried adding

.woodmart-gallery-item:hover {
//transform: matrix(1, 0, 0, 1, 0, 0);
transform: scale(1.5);
overflow:hidden;
width:268px;
}

to the custom css, but the image always overflows. Please guide us how we can have a smooth animation since there is no option to add a custom css to each image from the elementor customization

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.woodmart-gallery-item {
	overflow:hidden;
}
.woodmart-gallery-item img {
	transition: all .5s ease;
	transform: scale(1);
}
.woodmart-gallery-item:hover img {
	transform: scale(1.5);
}

Remove your custom CSS you would get something like this: https://gyazo.com/aab401179538d687e8ec92fc5c92c94f

Best Regards

Thanks that was really helpful

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts