Elementor Magic: Master Image Zoom & Lightbox Features

by | Dec 21, 2024 | Elementor Page Builder, Web Design, Wordpress

Elementor Magic: Master Image Zoom & Lightbox Features

Elementor Magic: Master Image Zoom & Lightbox Features

Welcome to another exciting blog post on Elemental! This is Jamie from System22 and Design Tech Tips. Today, we’ve got a fantastic feature for you: an impressive image hover effect in Elementor. When you hover over these images, they’ll zoom in, yet stay contained within their column, and you can click to open them in a lightbox or any URL you choose. This feature is perfect for any desktop website and is incredibly easy to implement. Let’s dive in and see how to get this set up!

First, let’s create a new section with three columns in Elementor. This will be the base structure for our image hover effect. Adding a new section in Elementor is straightforward: click the plus icon to add a new section and choose the structure with three columns. With our section in place, it’s time to add image modules to each column.

Now that our section is ready, we need to add image modules to each of the three columns. Click the plus icon inside each column and search for the image widget. Click on the image widget to upload or select the images you want to use. For consistency, I’ll use the same images I had before. You can choose any images that fit your website’s theme.

To give our section a bit of breathing room, we’ll add padding around it. Click the section handle (the dots at the top of the section), click on the “Advanced” tab, and set padding to 50 pixels on all sides.

We’ll use a bit of custom CSS to achieve the zoom effect. Don’t worry if you’re not familiar with CSS; it’s quite simple, and I’ll guide you through it step-by-step. Using CSS is a powerful way to add custom styles to your site, and if you make a mistake, you can easily revert it by deleting the code. If you’re using Elementor Pro, you can add custom CSS directly to the page by clicking the “Advanced” tab and scrolling down to the “Custom CSS” section. If you’re using the free version of Elementor, you can add custom CSS in the WordPress Additional CSS panel. Navigate to your WordPress dashboard, go to “Appearance,” then “Customize,” and you’ll find “Additional CSS” at the bottom.

Let’s start writing our CSS code. We’ll create a class that will apply the zoom effect to our images. All class names in CSS start with a dot. For this tutorial, we’ll use `.img-zoom`. Initially, when the mouse is not hovering over the image, we want it to be its regular size. Use the `transform: scale(1);` property. When the mouse hovers over the image, we want it to zoom in to twice its size. Use the `:hover` pseudo-class and set `transform: scale(2);`.

Here’s what the CSS code looks like:

“`css
.img-zoom {
transform: scale(1);
transition: transform 1s;
}

.img-zoom:hover {
transform: scale(2);
}
“`

We need to apply this class to our image widgets. Click on the image widget, click the “Advanced” tab, and in the “CSS ID & Classes” section, add `img-zoom` to the “CSS Classes” field.

To ensure the zoom effect stays within the column boundaries, we need to add another CSS class to the columns. Let’s call this class `.img-container`. Use the `overflow: hidden;` property to hide any part of the image that extends beyond the column.

Here’s the CSS code for the column:

“`css
.img-container {
overflow: hidden;
margin: 10px;
}
“`

We need to apply this class to our columns. Click on the column handle (the dotted box around the column), click the “Advanced” tab, and in the “CSS ID & Classes” section, add `img-container` to the “CSS Classes” field.

To make the zoom effect smooth and elegant, we need to add a transition duration. Edit the `.img-zoom` class in the custom CSS section and add `transition: transform 1s;` to make the zoom effect happen over one second.

Here’s the updated CSS code:

“`css
.img-zoom {
transform: scale(1);
transition: transform 1s;
}

.img-zoom:hover {
transform: scale(2);
}
“`

Now, let’s set up the images to open in a lightbox or any URL when clicked. Click on the image widget, click the “Content” tab, and in the “Link” section, choose “Media File” to open the image in a lightbox, or set a custom URL to link to any webpage.

To apply the same effect to other images in the section, open the Elementor Navigator by clicking the icon at the bottom left of the Elementor panel. Right-click the image widget and select “Copy.” Right-click the other columns and select “Paste.”

Make sure the CSS classes are applied correctly to all images and columns. Select each column and ensure the `img-container` class is applied. Select each image and ensure the `img-zoom` class is applied.

If the images are not behaving as expected, ensure there’s no additional padding or margin that might affect the layout. Make sure the CSS classes are correctly applied to all images and columns.

Let’s preview our page and make sure everything is working as intended. Click the “Update” button to save your changes and click the eyeball icon to preview your page.

There you have it! You’ve successfully created a zoom-in effect for your images in Elementor, with the images remaining contained within their columns. This effect not only looks professional but also enhances user engagement on your site. Adding such interactive elements can make your website more dynamic and visually appealing.

Don’t be afraid to experiment with different CSS properties to achieve various effects. Always use custom class names that are unique to avoid conflicts with other styles on your site. If possible, use Elementor Pro for more advanced features and easier implementation of custom CSS.

I hope you’ve enjoyed this tutorial and found it useful. If you have, please hit like, subscribe, and comment below. It’s always great to hear from you. If you enjoyed the hover effects, check out our Elementor hover effects playlist. Once again, this has been Jamie from System22 and Design Tech Tips. Thanks for reading, and have a great day!

Elementor Ecommerce Shop Site Build: https://www.youtube.com/watch?

v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA

My Elementor Video Playlist : https://www.youtube.com/watch?

v=yN6YlT1Cvqc&list=LLYeyetu9B2QYrHAjJ5umN1Q

Elementor Hover Effects Playlist: https://www.youtube.com/playlist?

list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2

Get Elementor From Here: https://be.elementor.com/visit/?bta=7653&nci=5528

Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Free Stock Photos

Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.

There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.

Free Stock Photos – Where to get an unlimited supply

Free Stock Photos – Where to get an unlimited supply

Latest YouTube Videos

Have a great website design

It is essential to have a great website design nowadays as so many people tend to shop and find services online. It is also very important to have a responsive website design as almost 50% of today’s browsing is done on smartphones and tablets, I certainly use mine for browsing. If a customer navigates to your site and they have to pinch and zoom to be able to read and navigate, the chances are that they will move away to another site and you will almost certainly lose that customer.

A well-developed website can convey trust and credibility, making people to buy from you, or support you. Whether you are a professional looking for a job, or an expert in your industry: you can show that to the whole world by having a custom responsive website.

Be sure to check out our playlist page to find the help you need!

Subscribe To Our YouTube Channel

4.5 million views on youtube




Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder




Pin It on Pinterest

Share This