Zoom effect on image with clickable text

Divi allows you to easily reproduce a zoom effect when hovering over an image with a clickable text overlay. I suggest you to discover how to obtain this trendy effect that will enhance your homepage or your calls to action...

Look what you'll get with this tutorial:

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Create an image with a clickable text overlay

To obtain an image with an overlay of text, we just have to "take the problem in reverse": we will use a Text module and add a background image.

In the web, you often have to think this way: you visualize the goal and you look for the tools at your disposal to achieve it.

1. Insert a line within your Divi layout. Choose for example a 3/3 line.
2. Insert a text module.
3. In the Content > Text tab, enter your call-to-action text. For my example, I've noted "your text here" but it's up to you to note what you want.
4. On the Content > Link tab, enter the web address to which the module should link.

Now you can add a background image:

5. In the Content > Background tab, select the image icon and add a background image.
6. For the moment, your module is not quite in line with what we could expect from a zoom effect on an image, but wait, it will come...
7. Still in the Content > Background tab, select the gradient icon. Click on "+ Background gradient".

8. A gradient being composed of 2 colors, you can select them one after the other to define a black with an opacity of 50%, for example. In my video, this is easier to understand...
9. A little further down, you will see an option called "title background image", activate it. This allows you to drag the black opaque gradient between the background image and the text module. You can imagine that this text module is composed of 3 levels of superposition, a bit like the layers of photoshop.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

With that done, we'll style the module so that it starts to look like a real clickable image with a zoom effect:

10. Go to the Style > Spacing tab and add some internal margin at the top and bottom. For example, 100px is a good value. Now we start to see the image in the background better.
11. Next, the Style > Text tab will allow you to style the text placed on the image. In my example, I've made it bold, white, with center alignment and increased the size. Since the background is quite dark, the white text stands out perfectly. You can use other colors, but make sure it's still readable.
12. In the Style > Shadow Box tab, you can add a small shadow to give the module a 3D effect.
13. On the Style > Border tab, you can optionally round the corners of the module a bit. For example, I have applied a value of 5px to the four corners.

Now you have a text module with a background image. This module is clickable and will be perfect for a call to action. But it still lacks a nice zoom effect...

2 - Reproduce the zoom effect on an image

Don't leave the module yet, there are still two small adjustments to make...

14. On the Content > Background tab, click on the "arrow" icon to activate the Hover functionality (mouse over). Make sure that the "float" tab is selected (the arrow icon again). Then select the gradient tab and reduce the strength of its black color by adding a little more transparency, for example 25%. The idea is that the image will look lighter when the mouse hovers over it.
15. Finally, go to the Style > Transform tab to add this famous zoom effect to the module. We want the zoom to take place when the user moves the mouse over the module (hover), so we need to activate the "float" functionality as in the previous step. Click on the arrow icon, select the first tab (transformation scale) and increase the size of the module to 115% for example. This will make the module bigger when the mouse hovers over it and will offer the desired zoom effect. Save the module.

3 - Duplicate modules as needed

Once your module is perfect and you have finished all the customizations, you can duplicate the module as many times as you want. This way, you will save time on the design of your layout.

16. Click on copy the module and don't forget to change the background image and the destination URL.

4 - Zoom effect with Divi: video tutorial

This tutorial is very simple but if you want to see it in video, it is here:

5 - In conclusion: a successful zoom effect!

A zoom effect on an image with clickable text is so easy to achieve with Divi! No need to use third-party extensions for this!

In fact, I can imagine the site of a graphic designer (or any other craft) use this system to display a portfolio and refer the user to each project page.

You can obviously go much further than that and add a pivot to the image on hover, change the size or color of the text, etc.!

This is precisely the purpose of using a theme like Divi you can customize your site as you wish.

You might also be interested in these other articles about images in Divi:

• Divi image cropping problem
• How to add 360° images in Divi
• Get square images in the blog and gallery module
• How to create a transition with a scroll zoom
• Allow gradients on a parallax background
• Designing custom image overlays with Divi