Réaliser un effet de survol d’image pour vos portfolios

Dernière mise à jour le 14 mars 2021 par LMD

Vous êtes nombreux à vouloir réaliser un effet de survol d’image sur vos portfolios. Voici une méthode générique en CSS3, avec un fondu, que vous pourrez adapter si besoin.

Le code HTML

Placer dans body et plus particulièrement dans un conteneur dédié, une section avec une classe « projets » par exemple, le code suivant :

<article class="vignette">
     <a href="#">
          <div class="photo"><img src="chats/chat8.jpg" alt="img"></div>
          <div class="infos">
               <h4>Heading here</h4>
               <p>Description goes here</p>
          </div>
     </a>
</article>

Bien entendu, il faut adapter ce code, avec votre propre contenu, image, textes, et lien. Attention que le texte du paragraphe ne soit pas trop long, sous peine de dépasser.

Le code CSS

Et placer dans le fichier CSS, le code suivant.

.vignette {
     position: relative;
     width: 250px;
     height: 250px;
 }

    /* ------- MASQUER LE TEXTE -------- */
        
.vignette .infos {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     text-align: center;
                
     /* Couleur du fond de texte */
     background-color: #1a4a72;
     background-color: rgba(26, 74, 114, 0.6);
                
     /* Masquer le bloc de texte en le rendant transparent - opacité nulle */
     opacity: 0;
                
     /* Animation de l'opacité au survol */
     /* Durée réglée à 0,8 secondes - à adapter */
     -webkit-transition: all 0.8s ease-in-out;
     -moz-transition: all 0.8s ease-in-out;
     transition: all 0.8s ease-in-out;
}
         
    /* ------- AFFICHER LE TEXTE AU SURVOL -------- */
            
.vignette a:hover .infos {
     /* Afficher le bloc de texte en le rendant opaque - opacité maximale */
     opacity: 1;
}
         
    /* ------- MISE EN FORME DU TEXTE -------- */
         
.infos h4 {
     /* couleur et réglages typographique du titre */
     color: #fff;
     font-size: 22px;
     text-transform: uppercase;
     letter-spacing: 2px;
                
     /* positionnement du titre */
     margin: 0 30px;
     padding: 55px 0 0 0;
     height: 110px;
                
     /* On peut rajouter une ombre portée */
     /*text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);*/
}
            
.infos p {
     /* couleur et réglages typographique du texte */
     color: #bbb;
     font-size: 12px;
     font-style: italic;
                
     /* positionnement du texte */
     padding: 10px 5px;
     margin: 0 30px;
                
     /* filet au dessus du texte */
      border-top: 1px solid rgba(255, 255, 255, 0.5);
}

Là aussi, il faut adapter la dimension de l’image dans la classe .vignette. Vous pouvez aussi modifier la couleur (background-color, les deux lignes correspondent à une couleur opaque et la même avec une transparence, une seule des deux lignes peut être conservée), la durée de l’animation (0.8s) et bien sûr les réglages du texte (h4 et p).

Par exemple, si vous voulez juste centrer un titre verticalement, ne pas utiliser de paragraphe, et dans la classe .infos juste écrire pour le positionnement :

display: flex;
align-items: center;

Design collaboratif