Zoom effect on image with clickable text

Published on 12/10/2020 | 6 comments

Divi allows you to easily reproduce a zoom effect when hovering over an image with a clickable text overlay. I suggest you to discover how to obtain this trendy effect that will enhance your homepage or your calls to action...

Look what you'll get with this tutorial:

Image Zoom Divi

Announcement: 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 an overlay of text, we just have to "take the problem in reverse": we will use a Text module and add a background image.

In the web, you often have to think this way: you visualize the goal and you 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. Choose for example 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 noted "your text here" but it's up to you to note 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 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 in line with what we could expect from a zoom effect on an image, but wait, it will come...
  3. Still in the Content > Background tab, 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 being 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 black opaque gradient between the background image and the text module. You can imagine that this text module is composed of 3 levels of superposition, a bit like the layers of 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'll 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 we 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've made it bold, white, with center alignment and increased the size. Since the background is quite dark, the white text stands out perfectly. You can use other colors, but make sure it's still readable.
  3. In the Style > Shadow Box tab, you can add a small shadow to give the module a 3D effect.
  4. On the Style > Border tab, you can optionally round the corners of the module a bit. 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 a nice zoom effect...

2 - Reproduce the zoom effect on an image

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

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 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 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 make the module bigger when the mouse hovers over it and will offer the desired 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 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!

In fact, I can imagine the site 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 obviously go much further than that and add a pivot to the image on hover, change the size or color of the text, etc.!

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

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

Zoom Image Texte Divi
Effet Zoom Image Divi
Zoom Image Hover

1,046 words

4

You should like it too:

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.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. 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.

6 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

    Cc.
    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

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

Shares
Share This