Zoom effect on image with clickable text

Published on 12/10/2020 | 2 comments

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:

Image Zoom Divi

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.

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 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.
Paramétrer le module Texte
Enter the text and the module link

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 you 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
Adding a background image and a gradient on top of it
  1. 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...
  2. 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:

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

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

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

Zoom Image Texte Divi
Effet Zoom Image Divi
Zoom Image Hover

1,046 words


You should like it too:

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images more graphic and give originality to your layout. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

2 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 😉

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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