Magnifying Image Zoom Effect In Elementor
hi guys in this Tutorial I’m going to show you how to add a magnifying Zoom effect in Elementor. It only takes a couple of minutes to do so don’t forget to hit that like And subscribe button and let’s get into the Tutorial.
Okay guys the first thing we’re going to do is set up our page. We do that by clicking on the plus button and choosing our section and in that section. We’re going to add a HTML widget to do that type in HTML in the top left hand side search bar and drag it onto the page. The next thing we need to do is highlight and copy our HTML code. I am going to leave the link to this page in my description below.
Once you’ve highlighted the HTML code you’re going to need to paste it into the box on the left hand side. Once you’ve added the HTML code go down to the bottom of the page where you’ll be able to find the CSS code. Highlight and copy the CSS code and go into the advanced tab in the top left hand side of Elementor. Scroll to the bottom where it says custom CSS.
To add custom CSS to your page you will need Elementor Pro there is a link for that in the bottom of the Tutorial. All you need to do now is paste in your code to make sure the code’s working. We’re going to click on the preview button next to the publish button in the bottom left hand side one. Once the page loads all we need to do to test the code is hover over our image.
As you can see we’ve got a magnifying effect. What I’m going to show you now is how to customize your code so we’re going to go back into Elementor to make our image bigger or smaller on the page. All we need to do is increase or decrease the width to change the magnified size of the zoom. All we need to do is go on to the next line down and change the width again in the rest of our custom CSS code there isn’t much more to change.
So what we’re going to do is go back up to the top left hand side of our screen and click on content. All we need to do to change our image on the pages highlight our image URL and replace it with a new one. Now we’re going to go to line 13 of our code and we’re going to highlight the image URL and we’re going to paste in the same image URL as we just added above. The reason why we’ve got to replace this one as well is because we’re not actually magnifying an image.
All we’re doing is showing a small portion of an image sat on top of another one. Once we’ve changed both we’re going to click on the preview button in the bottom left hand side of our screen. Once the preview page loads we can hover over our image and we can see that both images have changed.
Remember if you do want to use this effect in Elementor you will need Elementor Pro. There is a link for that in the top of the description it is an affiliate link. It doesn’t cost you any more to use but it does give me a very small percentage if you choose to sign up to Elementor Pro. I have left the link for this page below.
If you have found this Tutorial useful please do hit that like And subscribe button. If you’ve got any questions hit me up in the comments box below that’s it for this Tutorial.
Thanks for watching and I’ll see you in the next one.
