Comment faire apparaitre une image en passant la souris sur un mot

Suite à la question de Sandra  sur cet article (Commentaire N°14), voici une méthode en CSS pour faire apparaître une image en pasant votre souris sur un mot. Cette méthode est adaptée de l'article Infobulle (Popup) en CSS.

Exemple

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dignissim eros Survolez-moi nisl. Cras et tortor sed nisl auctor placerat. Morbi et quam id neque blandit pellentesque. Ut nisi ipsum, pretium ac, pretium a, pulvinar adipiscing, nisi. Nulla facilisi. Donec vehicula tellus sed enim. Morbi consequat, augue sed vulputate adipiscing, velit risus vestibulum odio, quis adipiscing

En plaçant le curseur de votre souris sur le mot souligné en pointillé vous verrez apparaître une image.

Comment faire

Pour obtenir ce résultat vous devez procéder en 2 ètapes:

• La première, vous devez ajouter dans votre CSS (au niveau des éléments principaux) le code suivant:

CSS

a.viewpic {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none;
}
a:hover.viewpic {
  text-decoration: none;
  background: none;
}
a.viewpic span {display: none;}

a:hover.viewpic span {
  display: inline;
  position: absolute; 
  top: -20px;
  left: 10px;
  z-index: 20;
  width:100%;
  padding:2px 4px;
}

• La deuxième, dans vos articles, chaque fois que vous voulez insérer une image comme cell-ci au survol d'un mot ou d'une expression, il suffit de mettre le code suivant en mode source:

HTML

<a class="viewpic" href="#">Survolez-moi<span><img src="url_image.jpg" alt="" /></span></a>

Pour aller plus loin

Si vous voulez modifier la position de l'image, dans le CSS, modifiez les valeurs des propriétés top et left.