Zoomer une image façon thumbnail en CSS

Pascale Lambert

Zoomer une image une image avec le langage CSS... fastoche. Faire des vignettes zoomables façon "thumbnail" demande un peu plus de dextérité. Ce tutoriel expliquant comment créer une série de vignettes zoomables à la sauce 100% CSS recommande d'avoir un niveau débutant averti ;-)

N'hésitez pas à nous faire part de votre avis sur cet article : Commentez

- Titre : Zoomer une image façon thumbnail en CSS

- Auteur : Pascale Lambert

- Parution : 24 novembre 2010

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 24/11/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Première technique

- Code (X)HTML

- Code CSS

- Seconde technique

- Code (X)HTML

- Code CSS

Première technique

Fonctionne avec :

- FireFox ;

- Mozilla / SeaMonkey ;

- MSIE 6+ ;

- Opéra 7 + ;

- Safari.

Attributs utilisés :

- background-color ;

- color ;

- display ;

- height ;

- width ;

- margin ;

- padding ;

- position ;

- top ;

- left.

Cette première technique m'a été inspirée par Olivier, le webmestre du site Boolsite. Merci à lui.

Code (X)HTML

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>

Code CSS

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.

Seconde technique

Fonctionne avec :

- FireFox ;

- Mozilla / SeaMonkey ;

- MSIE 6+ ;

- Opéra 7 + ;

- Safari.

Attributs utilisés :

- background-color ;

- color ;

- display ;

- height ;

- width ;

- margin ;

- position ;

- top ;

- left ;

- text-decoration;

La première technique fait disparaître la vignette au profit de l'image zoomée et celles-ci se décalent au fur et à mesure vers la droite. La vignette ne disparaît pas avec cette seconde technique, et les images zoomées apparaissent toujours au même endroit. Par contre, le poids de la page sera plus élevé car dans le code (X)HTML on déclarera la vignette et l'image zoomée.

Pour cet exemple, il y aura donc six images en tout contre trois précédemment.

Code (X)HTML

<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").

Code CSS

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 ?