Elementor : Changer l’image au survol du texte (Tuto + Code)
Victor Mailloux
13 janvier 2026
Dynamiser une page d’accueil ou une présentation de services demande de l’interactivité. Une technique efficace, utilisée sur de nombreux sites primés (Awwwards), consiste à modifier l’image affichée au simple survol d’un titre ou d’un texte.
Ce guide technique vous détaille la méthode pas à pas pour recréer cet effet moderne sur WordPress. La bonne nouvelle est que cette manipulation est réalisable nativement avec Elementor Pro, mais aussi avec la version gratuite grâce à une astuce simple que je vous partage ci-dessous.
Comme promis dans la vidéo, voici tous les éléments techniques dont vous avez besoin. Copiez-les simplement et suivez le guide ci-dessous pour savoir où les placer
À ajouter dans l’onglet Avancé > Attributs de chaque widget texte :
data-target|1
data-target|2
data-target|3
À ajouter dans l’onglet Avancé > Classes CSS de vos images (version Ordinateur et Mobile) :
Pour ordinateur :
img-ordi content-1
img-ordi content-2
img-ordi content-3
Pour mobile :
img-mobile content-1
img-mobile content-2
img-mobile content-3
À coller dans la section CSS Personnalisé de votre conteneur principal (nécessite Elementor Pro ou Royal Addons) :
selector .img-ordi,
selector .img-mobile {
display: none !important;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
selector .active {
display: block !important;
opacity: 1;
}
@media (max-width: 767px) {
selector .img-ordi { display: none !important; }
}
@media (min-width: 768px) {
selector .img-mobile { display: none !important; }
}
À coller dans un widget HTML placé en bas de votre section :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($){
function initFirstImage() {
var isMobile = window.matchMedia("(max-width: 767px)").matches;
if (isMobile) {
$('.img-mobile.content-1').addClass('active');
} else {
$('.img-ordi.content-1').addClass('active');
}
}
initFirstImage();
function activateImage(targetID, isMobile) {
$('.img-ordi, .img-mobile').removeClass('active');
if (isMobile) {
$('.img-mobile.content-' + targetID).addClass('active');
} else {
$('.img-ordi.content-' + targetID).addClass('active');
}
}
$('[data-target]').on('mouseenter click', function(e){
var targetID = $(this).attr('data-target');
var isMobile = window.matchMedia("(max-width: 767px)").matches;
if (e.type === 'mouseenter' && !isMobile) {
activateImage(targetID, false);
}
else if (e.type === 'click' && isMobile) {
activateImage(targetID, true);
}
});
});
</script>
Pour ce tutoriel, vous devez disposer d’Elementor.
Note importante : L’ajout de CSS personnalisé est une fonctionnalité native d’Elementor Pro. Si vous utilisez la version gratuite, installez l’extension Royal Addons pour débloquer cette option sans frais supplémentaires.
La base de notre section repose sur une mise en page flexible (Flexbox ou Grid).
Ajoutez un nouveau Conteneur à deux colonnes (structure direction ligne).
Dans l’onglet Mise en page, réglez la Hauteur min sur 100 VH. Cela permet à la section d’occuper la totalité de la hauteur de l’écran.
Dans Justifier le contenu et Aligner les éléments, sélectionnez l’option Centrer pour que votre contenu soit parfaitement positionné au milieu de l’écran.
Rendez-vous dans l’onglet Style pour définir la couleur d’arrière-plan de votre choix.
Enfin, définissez les proportions des conteneurs internes pour l’équilibre visuel :
Sélectionnez le conteneur de gauche (Textes) et attribuez-lui une largeur de 40%.
Sélectionnez le conteneur de droite (Images) et attribuez-lui une largeur de 60%.
Nous allons maintenant créer les éléments déclencheurs.
Glissez un widget Titre ou Texte dans le conteneur de gauche.
Stylisez votre texte (Typographie, couleur blanche, etc.).
Pour aérer le design, allez dans Avancé > Marge interne (Padding) et ajoutez 20px.
Pour créer un effet visuel lors du passage de la souris, allez dans Avancé > Arrière-plan, cliquez sur l’onglet Au survol et définissez une couleur de fond légèrement différente.
C’est l’étape cruciale pour que le code comprenne quel texte est survolé.
Toujours sur votre widget texte, allez dans Avancé > Attributs.
Collez l’attribut fourni plus haut (ex: data-target|1).
Dupliquez ce widget deux fois pour avoir vos trois lignes.
Attention : Sur le deuxième texte, modifiez l’attribut pour mettre la valeur 2. Sur le troisième, mettez la valeur 3.
Dans le conteneur de droite, toutes les images seront superposées. C’est le code CSS qui se chargera d’afficher la bonne image au bon moment.
Ajoutez un widget Image et sélectionnez votre premier visuel.
Dans Avancé > Classes CSS, collez la classe correspondant à l’image 1 version ordinateur (fournie en début d’article).
Dupliquez cette image deux fois.
Remplacez les visuels pour qu’ils correspondent à vos textes 2 et 3.
Mettez à jour les classes CSS de chaque image dupliquée (remplacez le chiffre 1 par 2, puis par 3).
Pour garantir un affichage optimal sur smartphone, nous allons créer des versions spécifiques des images.
Dupliquez à nouveau vos images.
Changez la classe CSS : remplacez le terme ordi par mobile dans le nom de la classe.
Pour éviter que toutes les images ne s’affichent en même temps ou fassent doublon, nous devons utiliser les options de visibilité d’Elementor.
Sélectionnez tour à tour vos 3 images « Ordinateur ». Dans l’onglet Avancé > Responsive, activez l’option Masquer sur Mobile et Masquer sur Tablette.
Sélectionnez ensuite vos 3 images « Mobile ». Dans Avancé > Responsive, activez l’option Masquer sur Ordinateur.
Conseil : Pour la version mobile globale, vous pouvez également choisir de masquer le conteneur parent des images si vous souhaitez une mise en page simplifiée (uniquement du texte) sur téléphone.
Tout est en place, il ne reste plus qu’à « allumer » le moteur.
Le CSS (Le Style) : Sélectionnez le Conteneur Principal (le tout premier parent). Allez dans l’onglet Avancé > CSS Personnalisé. Collez-y le code CSS complet. Si vous ne voyez pas cet onglet et n’avez pas Elementor Pro, assurez-vous que Royal Addons est bien activé.
Le JavaScript (La Mécanique) : Recherchez le widget HTML dans la barre d’outils Elementor. Glissez-le tout en bas de votre page (en dehors de la section principale pour plus de clarté). Collez-y le code JavaScript (compris entre les balises <script>).
Une fois ces étapes validées, cliquez sur Mettre à jour et prévisualisez votre page. Vous disposez désormais d’une section interactive professionnelle qui réagit au comportement de l’utilisateur.
Ce type d’animation permet d’augmenter le temps passé sur la page et améliore l’expérience utilisateur (UX). Si vous rencontrez des difficultés lors de l’intégration, je vous invite à poser vos questions directement dans l’espace commentaires de la vidéo YouTube associée à cet article.
Je me suis d’abord lancé comme freelance, créant mes premiers sites WordPress en 2022 et me formant progressivement au SEO et au design web. Fin 2023, j’ai fondé Agence web armor, pour accompagner les entreprises dans leur présence en ligne. Aujourd’hui, je conçois des sites simples, rapides et bien référencés, pensés pour attirer des visiteurs qualifiés et générer des résultats concrets.
