Divi Tips 103

Zoom effect on image with clickable text

Updated on 12/10/20

1045 words

4 minutes of reading
16 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

Divi makes it easy to reproduce a zoom effect over an image with a text clickable in superposition. I suggest you discover how to get this trendy effect that will enhance your home page or your calls to action...

Look what you will get with this tutorial:

Image Zoom Divi

1 – Create an image with a clickable text in superposition

To obtain a image with superposition text, just "take the problem backwards" : we will use a Text module and add background image.

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

Insert a line 3/3
Insert a line 3/3 with a text module.
  1. Insert a line within your Divi layout. For example, choose a line 3/3.
  2. Insert a Text module.
  3. In the tab Content > Text, type your call to action text. For my example, I noted "Your text here" But it's up to you to note what you want.
  4. In the tab Contents > Linkenter the web address to which the module should return.
Set the Text module
Enter the text and link of the module

Now you can add a background image:

  1. In the tab Content > Background, select the image icon and add a background image.
  2. For now, your module is not entirely in line with what one might expect from a zoom effect on a picture, but wait, it's coming...
  3. Still in the tab Content > Background, select now gradient icon. Click "+ Background Degraded".
Add background image and gradient to image
Add background image and gradient above
  1. A gradient is composed of 2 colors, so you can select them one after the other to define a black with an opacity of 50%, for example. In my video, it's easier to understand...
  2. A little below, you will see an option named « background image of the title », activate it. This allows you to drag the opaque black gradient between the background image and the text of the module. One can imagine then that this text module is composed of 3 levels of superposition, a little like photoshop layers.

Do you know you can test Divi for free? See you on 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 image clickable with zoom effect :

stylize the Text + Image module
Improve the appearance of the Text + Image module
  1. Go to tab Style > Spacing and add internal margin at the top and bottom. For example, 100px is a suitable value. Now we're starting to see the picture better in the background.
  2. Then the tab Style > Text allow you to stylize the text placed on the image. In my example, I put it in bold, white, with a centered alignment and I increased the size. Since the background is quite dark, the white text comes out perfectly. You can use other colors but make sure it stays legible.
  3. On the tab Style > Shadow box, you can add a small shade to give a 3D effect to the module.
  4. On the tab Style > Border, you can possibly round the corners of the module a little bit. For example, I applied a value of 5px to all four angles.

Here 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 the little one is still missing zoom effect Nice...

2 - Reproduce the zoom effect on an image

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

Add the zoom effect to the module
Lower the gradient intensity and increase the module size on mouse overfly to achieve a zoom effect.
  1. On the tab Content > Background, click on the icon "arrow" which allows to activate the Hover feature (surrounding the mouse). Make sure that the tab "Float" is well 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 has a clearer appearance on the mouse fly.
  2. Finally, go to the tab Style > Transformer to add this famous zoom effect on the module. We want the zoom to take place when the internet user passes the mouse over the module (hover), so we need to activate the functionality "Float" As in the previous stage. Then click the arrow icon, select the first tab (transformation scale) and increase the module size to 115% for example. This will allow the module to grow over the mouse and offer zoom effect expected. Save the module.

3 – Duplicate modules as required

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

duplicate the call to action module
Duplicate module and change links and images
  1. Click copy the module and remember to change the background image and destination URL.

4 - Zoom effect with Divi : tutorial in video

This tutorial is simple but if you want to see it in video, it's 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 that!

Besides, I imagine the site of a graphic designer (or any other profession of art) use this system to display a portfolio and return the user to each Project page.

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

It is precisely the aim to use a theme like Divi : you can customize your site As you wish.

These other articles that deal with images in Divi may interest you:

Zoom Image Text Divi
Zoom Effect Image Divi

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256

Proudly translated by wpLingua, the translation extension for WordPress That I develop! SEO-Friendly / Automatic / Editable

16 Comments

  1. Virginie
  2. Lycia Diaz
  3. Marine
  4. Lycia Diaz
  5. Pinel Tona
  6. Lycia Diaz
  7. chupa
  8. Lycia Diaz
  9. JANNOT
  10. Lycia Diaz
  11. brunet
  12. Lycia Diaz
  13. Myriam
  14. Lycia Diaz
  15. Nick Freund
  16. Lycia Diaz

Submit a comment

Your email address will not be published. Required fields are indicated with *

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.