This tutorial will teach you how to create a smooth zoom image effect on hover using Elemntor and CSS.
First, we are using an image widget in Elementor to place our image and we will assign a pixel width to the section that contains the image.
Then we will define the hover state of our image using the transform property to scale our image up.
We will adjust the transition of our image to create a smooth effect on hover.
And lastly, we will use the overflow: hidden on our box containing the image to hide the parts of the image that are going outside of the frame upon zooming in on hover.
That's it!
We are using a simple image widget in Elementor.
Grab the CSS code here:
www.velvetmade.com/2024/02/19...
------------------------------
PURCHASE AND DOWNLOAD ELEMENTOR PRO:
trk.elementor.com/cssexpress
------------------------------
SIMPLE CUSTOM CSS AND JS PLUGIN:
To use custom CSS code with Elementor FREE, I am using the Simple Custom CSS and JS plugin for Wordpress that you can download here:
wordpress.org/plugins/custom-...
Have fun and thanks for watching!
If this tutorial helped you, please share or subscribe.
------------------------------
This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
------------------------------
Have a specific problem in Elementor that you don't know how to solve with CSS? Comment below to let me know which video you would like to see next!
9 июл 2024
