Effet au passage de la souris

Il y a plusieurs techniques pour faire apparaître un texte au dessus d'une image avec du CSS ou jQuery. Voici quelques pistes...

CSS Uniquement

Mettez votre image et le texte dans une div avec le nom de classe csspane, le texte devrait être dans une autre div, dans cet exemple, text.

<div class="csspane">
  <img src="http://dummyimage.com/600x300/999/fff" width="600" height="300" alt="" />
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>

On va styler cette div pour créer un simple effet d'opacité. D'abord, stylons .csspane pour que ça prenne la largeur et la hauteur de l'image. Le "line-height" sur l'image sert à enlever les espaces non désirés autour de l'image.

.csspane {
  display: inline-block;
  line-height: 0;
  overflow: hidden;
  position: relative;
}
.csspane img {
  line-height: 0;
}

Cachons la div .text en temps normal.

.csspane .text {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  line-height: normal;
  width: 100%;
  height: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

Enfin, on le fait apparaître lorsqu'on passe la souris sur .csspane!

.csspane:hover .text {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

4 comments

  1. Florent 30 juillet 2014 at 15:30:25

    Bonjour,

    Merci pour ce code qui permet d'obtenir de très beaux rendus.
    Se pose cependant une difficulté de mon côté : je n'arrive pas à insérer un lien sur l'image lorsque le curseur de la souris est dessus.

    Auriez-vous une solution à cette problématique ?

    Merci beaucoup !

    • Karine 30 juillet 2014 at 15:32:51

      Bonjour Florent,
      Il suffit d'envelopper l'image et < div class="text" > dans le lien.
      Example:
      < a href="#" rel="nofollow" >< img ... >< div class="text" > ...

  2. jojo 29 septembre 2014 at 03:55:02

    Bonjour,

    Quand je colle le code htlm sa ne marche pas le texte qui est censée s'affiché au passage de la souris et en dessous et il ne bouge pas!

    Merci

  3. Bernard 15 mars 2015 at 03:31:58

    Un grand merci pour ces explications claires et leur illustration.
    Je cherchais la manière de réaliser cela sans javascript.

Comments are closed.