CSS Débutants

Vous êtes ici >  CSS débutants | Zoomer une image en CSS

Zoomer une image avec les CSS

Première technique

Zoomer une image, à l'aide des CSS2, lors de son survol de la souris peut se faire très facilement. Il suffit de combiner la valeur :hover à la balise img (image).

code (x)html

L'image est déclarée dans le code html sans valeurs de tailles (ni width, ni height) :

<div class="zoom">
<p>
<img src="pensees_1.jpg" alt="pensées de Giverny" />
</p>
</div>

Code CSS

Pour éviter tout saut, ou recouvrement, du texte sous-jacent lors du zoom, on peut déclarer cette image dans un cadre (ici appelé zoom) de hauteur égale à la photo zoomée (ici 400px). De même, ce cadre servira aussi à limiter cette propriété grossissante à cette seule image.

Les valeurs de tailles sont déclarées au sein de la feuille de style, tout d'abord dans son état initial (img), puis dans son état survolé (img:hover)
Ici, les tailles de l'image passeront de 200x267 pixels à 300x400 pixels

.zoom {
height:400px;
}
.zoom p {
text-align:center;
}
.zoom img {
width:200px;
height:267px;
}
.zoom img:hover {
width:300px;
height:400px;
}

Résultat

Vous ne voyez rien se passer ?! Pauvre de vous... Vous utilisez sûrement MSIE 6 (ou 5.5) !
C'est tout le problème de cette technique pourtant si simple : MSIE 6 n'implémente pas la valeur :hover pour autre chose que des liens. Grave et encombrante lacune heureusement comblée par MSIE7.

Seconde technique

Pour cet âne bâté d'Internet Explorer, il va falloir tricher en faisant croire que l'image est un lien.
Cette fois l'image ne sera plus déclarée dans la page html mais uniquement dans la feuille de style en fond d'écran (background).
De plus, il faudra avant tout travailler la photo ou figurera, l'une en dessous de l'autre, l'image initiale et l'image à apparaître lors du zoom.

Inconvénients de la méthode :

1. L'image sera plus lourde, donc plus longue à charger.
2. En cas d'impression, la photo n'apparaîtra pas si l'internaute a configuré la non-impression des fonds d'écran.

Code (x)html

<div class="zoom1">
<p>
<a href="#" title="pensées de Giverny"></a>
</p>
</div>

Code CSS

L'image pensees_2.jpg a donc été créée avec un bon logiciel de traitement d'images (PUB : PhotoFiltre est agréablement performant, et gratuit en cas d'utilisation privée). Elle a une taille finale de 300x800 pixels pour un poids de 49 ko.

Toute l'astuce va être de faire apparaître les morceaux choisis de cette image : la partie haute par défaut (300x400 pixels) puis la partie basse (300x400 pixels aussi) au survol de la souris.
Cette dernière devant "remonter" de 400 pixels vers le haut, on indiquera pour la position de fond de page background-position:0px -400px ; le 0 étant relatif à la position horizontale et le -400px à la position verticale.

Ne pas oublier surtout le très important display:block qui permet ici le "remplacement" de la première portion d'image par l'autre.

.zoom1 {
 width: 300px;
 height: 400px;
 background-image: url(pensees_2.jpg);
 background-repeat: no-repeat;
 margin: 0 auto; 
}
.zoom1 p, .zoom1 a {
height: 400px; 
display: block;
margin:0
}
.zoom1 a:hover {
background-image: url(pensees_2.jpg);
background-position: 0 -400px;
background-repeat:no-repeat;
cursor:help;
}

Astuces

margin:0 auto déclaré dans .zoom1 permet de centrer horizontalement l'image dans la page. Hélas, encore une fois, MSIE ne l'implémente pas...

cursor:help déclaré dans zoom1_1 a:hover permet de changer l'apparence du curseur lors du survol de l'image. D'autres valeurs, comme cursor, crosshair, default sont aussi disponibles.

Résultat

Variante

On peut choisir évidemment de garder les mêmes dimensions d'images pour ne zoomer qu'une partie.

Pour cette variante, j'ai choisi de zoomer une seule de ces fleurs. L'image, dans ce cas, est pensees.jpg. Elle a une taille de 200x534 pixels pour un poids de 27 ko. Cette fois, la "remontée" de l'image ne doit être que de 267 pixels.

Code CSS

Avec le même code (x)html que ci-dessus, le code CSS devient  :

.zoom1 {
width: 200px;
height: 267px;
background-image: url(pensees.jpg);
background-repeat:no-repeat;
margin: 0 auto; 
}
.zoom1 p, .zoom1 a {
height: 267px;
display: block;
margin:0
}
.zoom1 a:hover {
background-image: url(pensees.jpg);
background-position: 0px -267px;
background-repeat: no-repeat;
cursor:help;
}

Compléments d'informations

Cette technique d'images "glissantes" appliquée aux zooms est inspirée de l'article "Les Portes Coulissantes de CSS - Chapitre II".
D'autre part, elle peut être aussi appliquée à des pseudo découpes d'images comme le décrit très bien cet autre article : "Sprites CSS : Meurs, découpe d'images, meurs !", lui aussi traduit par l'équipe de pompage.net.

Haut de page