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 discover how to obtain this trendy effect that can enhance your homepage or your calls to action...

See what you get with this tutorial:

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

1 - Create an image with clickable text overlay

To obtain an image with superimposed text, we simply "take the problem in reverse": we will use a Text module and add a background image.

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

1. Insert a line within your Divi layout. For example, choose 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 written "your text here" but it's up to you to write down what you want.
4. In 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 one 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. A gradient is composed of 2 colours, so 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 then imagine that this text module is composed of 3 levels of superimposition, a bit like the layers in 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 will 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 you 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 have made it bold, white, with centre 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 it is still readable.
12. On the Style tab > Shadow Box, you can add a small shadow to give the module a 3D effect.
13. On the Style > Border tab you can round off the corners of the module a little. 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 the cool zoom effect...

2 - Reproducing the zoom effect on an image

Do not 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 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 colour by adding a little more transparency, for example 25%. The idea is that the image will look lighter on mouse over.
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 cause the module to grow when the mouse hovers over it and provide the desired zoom effect. Save the module.

3 - Duplicate modules as needed

Once your module is perfect and you have finished all the customisations, you can duplicate the module as many times as you like. This will save you time on designing 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!

Moreover, I can imagine the website 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 of course go much further than that and add a pivot to the image on hover, change the size or colour of the text, etc!

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

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

• Crop problem with 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
• Allow gradients on a parallax background
• Designing custom image overlays with Divi