Zoom effect on image with clickable text

Divi makes it easy to reproduce a zoom effect when hovering over an image with clickable text overlay. I propose you to discover how to get this trendy effect that can embellish your homepage or your calls to action...

Look what you're going to get with this tutorial:

Advertisement: 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 superimposed text, simply "take the problem upside down": we will use a Text module and add a background picture.

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

1. Insert a line within your Divi layout. For example, choose a line 3/3.
2. Insert a Text module.
3. In the Content > Text tab, enter your call to action text. For my example, I wrote down "your text here" but it is up to you to write down 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 what you would expect from a zoom effect on an image, but wait, it will come...
7. Still in the Content > Background tab, now select the gradient icon. Click on " + Background gradient ".

8. As a gradient is 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 opaque black gradient between the background image and the module text. We can then imagine that this text module is composed of 3 levels of superimposition, a bit like photoshop layers.

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

This being done, we will stylize 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 inner margin at the top and bottom. For example, 100px is a suitable value. Now you start to see the image better in the background.
11. Next, the Style > Text tab will allow you to style the text placed on the image. In my example, I put it in bold, white, with centered alignment and increased the size. Since the background is quite dark, the white text stands out perfectly. You can use other colours, but make sure that it remains legible.
12. In the Style > Shadow Box tab, you can add a small shadow to give a 3D effect to the module.
13. On the Style > Border tab, you can optionally round the corners of the module a little. For example, I applied a value of 5px to the four corners.

That's it, you are now in possession of a text module with an image in the background. This module is clickable and will be perfect for a call to action. But it still lacks the nice little zoom effect...

2 - Reproducing the zoom effect on an image

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

14. On the Content > Background tab, click on the "arrow" icon to activate the Hover functionality (mouse hovering). Make sure that the "float" tab is selected (still the arrow icon). 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 on the module. We want the zoom to take place when the user hovers the mouse over the module (hover), so we need to activate the "float" feature as in the previous step. Then click on the arrow icon, select the first tab (transformation scale) and increase the size of the module to 115% for example. This will allow the module to be enlarged when the mouse hovers over it and will offer the expected 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 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 on video, it's here:

5 - In conclusion: a successful zoom effect!

Zooming in on an image with clickable text is so easy with Divi! No need to use third party extensions for that!

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

You can of course go much further than that and add an image pivot to the hover, change the size or color of the text, etc!

That's just the purpose of using a theme like Divi you can customize your site as you wish.

You may also be interested in these other articles dealing with images in Divi:

• Problem cropping Divi images
• 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
• Allowing gradients on a parallax background
• Designing custom image overlays with Divi