Zoomer une image façon thumbnail en CSS

Les images sont déclarées dans le code HTML sans valeurs de tailles (ni width, ni height), chacune d'elle est dans un <div class="thumb"> dont les propriétés seront déclarées dans la feuille de style. Une seule image par zoom est nécessaire, le poids de la page doit pouvoir rester raisonnable si l'on n'utilise pas d'images trop grandes.

<div class="thumb">
  <a href="#">
    <img src="300_inachis-io.jpg" alt="Inachis-io" />
  </a>
</div>
<div class="thumb">
  <a href="#">
    <img src="300_machaon.jpg" alt="Machaon" />
  </a>
</div>
<div class="thumb">
  <a href="#">
    <img src="300_polyommatus-icarus.jpg" alt="Polyommatus-icarus" />
  </a>
</div>

J'ai choisi de présenter les photos sur un fond noir déclaré dans body. La hauteur de 500px n'est là que pour faire apparaître un ascenseur vertical en cas de résolution d'écran inférieure à 1024*768, et dont l'absence peut rendre difficile la visualisation des photos agrandies. Puis on fixe une bonne fois pour toute la largeur des bords des images à zéro.

Les vignettes déclarées dans la classe .thumb ont une taille de 100*75 pixels. Je désire qu'elles flottent les unes par rapport aux autres à gauche (float:left), qu'elles soient un petit peu espacées (margin:1px). Lorsqu'elles disparaîtront au profit de l'image zoomée, il apparaîtra à la place un rectangle gris (background-color:#D3D3D3;). Et surtout, pour éviter des sauts intempestifs, on les fixe grâce au display:block.

Vient ensuite le comportement que doivent avoir ces vignettes lors du survol par le curseur de la souris, et c'est là que ça se corse.

Tout d'abord il va falloir s'affranchir des différences de comportements entre MSIE et Mozilla. On commence par stabiliser le tout avec (encore...) un display:block pour les liens.
Il va falloir ensuite avoir recours à un "hack". Pour MSIE, il faut que les liens soient déclarés en position absolue, mais pour Mozilla, il faut que ce soit en position relative sinon le rollover ne fonctionne pas de gauche à droite... Ceci explique le body > .thumb a:hover que MSIE n'interprète pas mais qui donnera à Mozilla la bonne définition.

Il est ensuite nécessaire de déclarer la taille des images liées : .thumb a img donne donc au navigateur les instructions nécessaires à la taille des images mises en lien dans le <div class="thumb">.

Et enfin, on déclare la taille et la position que devront avoir les images zoomées. La position est donc relative aux vignettes, et la taille de 300*225px.

Vous avez tout suivi ? tout compris ? non ?!! ah flute... voilà le code quand même :

body {
  background-color:black;	 
  color:white;
  height:500px;
} 
 
img {
  border:0
} 
 
.thumb {
  width:100px;
  height:75px; 
  margin:1px;
  float:left; 
  background-color:#D3D3D3; 
  display:block;
} 
 
.thumb a {
  display:block;
}
 
.thumb a:hover {
  position:absolute;	
}	 
 
/*hack pour permettre le rollover 
de gauche à droite avec mozilla*/
 
body > .thumb a:hover {	  
  position:relative;	 
}	
 
.thumb a img { 
  margin:0;
  padding:0;
  width:100px;
  height:75px; 
}
 
.thumb a:hover img {
  position:relative;
  left:0px;
  top:80px;
  width:300px;
  height:225px;  
}

Résultat :

Voir le résultat en ligne.

<div class="thumb">
  <a href="#">
    <img src="100_inachis-io.jpg" alt="miniature Inachis-Io" />
    <img src="300_inachis-io.jpg" alt="Inachis-io" class="grand" />
  </a>
 
  <a href="#">
    <img src="100_machaon.jpg" alt="miniature Machaon" />
    <img src="300_machaon.jpg" alt="Machaon" class="grand"  />
  </a>
 
  <a href="#">
    <img src="100_polyommatus-icarus.jpg" alt="miniature Polyommatus-icarus" />
    <img src="300_polyommatus-icarus.jpg" alt="Polyommatus-Icarus" class="grand"  />
  </a>
</div>

Comme vous le constatez, il n'y a cette fois qu'un seul cadre (<div class="thumb">), par contre une autre classe est nécessaire pour les photos zoomées (class="grand").

Même topo que précédemment pour les attributs de body, par contre un bord de 1 pixel noir est déclaré pour les images, mais on peut s'en passer, c'est juste une histoire de goût.

La classe .thumb définit une position relative du cadre en haut à gauche (à partir de ce qu'il y a juste au-dessus).
Dans .thumb a on fixe les marges à zéro et le non soulignement des liens pour éviter tout parasite.
Et alors là, attention : pour que le survol puisse prendre corps, il faut absolument déclarer quelque chose pour les liens survolés, quelque chose de neutre... un fond de couleur noire par exemple (thumb a:hover).

On passe maintenant aux caractéristiques des images zoomées.
La classe .grand est appliquée aux images liées, incluses elle-mêmes dans la classe thumb (ah ben oui, je sais, ça fait un peu poupées gigognes tout ça...). Donc, dans .thumb a .grand on aura un display:block et une position absolue (sinon, tout ce petit monde va aller se balader n'importe où), et surtout, une largeur de 0px pour éviter des chevauchements intempestifs.

Il n'y a plus qu'à s'occuper de la taille et de la position de l'image zoomée au moment du survol du curseur : position absolue, à 80px en dessous de la position initiale (cad du haut des vignettes), complètement à gauche, et de taille 300*225 pixels.

OUF ! Mal à la tête ? c'est normal, c'est le métier qui rentre. Bon, en même temps ce n'est pas très grave si vous n'avez pas tout compris, moi non plus de toute façon...

body {
 background-color:black;	
 color:white;
 height:500px; 
}
 
img {
 border:1px solid black;
}	
 
.thumb {
 position:relative; 
 top:0;
 left:0; 
}
 
.thumb a {
 margin:0;
 text-decoration:none;
}
 
.thumb a:hover {
 background-color:black;	
}
 
.thumb a .grand {
 display:block;
 position:absolute; 
 width:0; 
}	  
 
.thumb a:hover .grand { 
 position:absolute; 
 top:80px;
 left:0;
 width:300px; 
 height:225px; 
}

Résultat :

Voir le résultat en ligne.

C'était un peu plus dur, mais ça valait le coup non ?