Image hover effect

There are several solutions to bring a text panel out on image hover with CSS and jQuery. Here are some solutions.

CSS Only

Wrap your image and the text in a div with the class csspane, the text should be inside another div, in this case, 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>

We're going to style it to create a nice simple fade-in effect. First, let's style .csspane, so that it takes the width and height of the image. The line-height on image is to remove any unwanted whitespace/margin on the image.

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

Now we need to style the .text div, let's hide it in its normal state.

.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;
}

When we mouse over the div, let's make the text appear!

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

4 comments

  1. Florent 30 July 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 July 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 September 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 March 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.