Divi Tips 103

Zoom effect on image with clickable text

Published on 12/10/2020 | 16 comments

1,046 words


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:

Image Zoom Divi

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.

Insérer une ligne 3/3
Insert a 3/3 line with a Text module.
  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.
Paramétrer le module Texte
Enter the text and link of the module

Now you can add a background image:

  1. In the Content > Background tab, select the image icon and add a background image.
  2. For the moment, your module is not quite what one would expect from a zoom effect on an image, but wait, it will come...
  3. Still in the Content > Background tab, now select the gradient icon. Click on "+ Background gradient".
Ajouter une image de fond et un dégradé sur l'image
Add a background image and a gradient over it
  1. 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...
  2. 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:

styliser le module Texte + image
Improve the appearance of the Text + Image module
  1. 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.
  2. 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.
  3. On the Style tab > Shadow Box, you can add a small shadow to give the module a 3D effect.
  4. 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...

Ajouter l'effet zoom sur le module
Decrease the intensity of the gradient and increase the size of the module on mouse-over to obtain a zoom effect.
  1. 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.
  2. 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.

dupliquer le module d'appel à l'action
Duplicate the module and change the links and images
  1. 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:

Zoom Image Texte Divi
Effet Zoom Image Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

16 Commentaires

  1. Virginie

    Merci pour cet effet hyper sympa et très facile à faire une fois le fonctionnement de Divi Builder.
    Je suis en train de créer mon site et cela me permet d’ajouter un aspect pro très plaisant.

  2. Lycia Diaz

    Merci Virginie 😉

  3. Marine

    Génial, merci Lycia !!

  4. Lycia Diaz

    Merci Marine 🙂

  5. Pinel Tona

    TOP TUTO. J’aime.

    Comment cela se fait sur ELEMENTOR ??

  6. Lycia Diaz

    Avec Elementor ? Je sais pas mais il doit sûrement avoir des options similaires

  7. chupa

    merci pour tout tes tuto tu vas m’être d’une grande aide mention + pour ton site !

  8. Lycia Diaz

    Merci beaucoup


    tres beau tuto mais comment s’appel-t-il ? sur DIVI pro

  10. Lycia Diaz

    Aucune idée

  11. brunet

    Tuto très bien. Juste une question ! quand mon image se zoom , elle n’apparait pas en entière, est-ce normal

  12. Lycia Diaz


  13. Myriam

    Je découvre votre site une pépite !!!! je sens que je vais y passer beaucoup de temps merci pour tout le partage !!!

  14. Lycia Diaz

    Merci Myriam

  15. Nick Freund

    Merci pour cette belle lecture, je pourrais apprendre beaucoup. Meilleures salutations, Nick

  16. Lycia Diaz

    Merci Nick

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Share This