Zoom d'images avec les CSS

En bref

Parmi les multiples techniques permettant de zoomer une image à l'écran, voici celle qui, uniquement à l'aide de CSS2, permet un zoom au survol d'une image avec la souris.

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="machaon.jpg"
         alt="photo d'un papillon machaon butinant une fleur" />
    </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). Ce cadre permettra aussi de limiter l'effet grossissant à 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 300x225 pixels à 400x300 pixels

.zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:300px;
height:225px;
}
.zoom img:hover {
width:400px;
height:300px;
}

Résultat

Testez le résultat dans votre navigateur.

image par défaut

Au survol :

image zoomée

Hélas cette technique simplissime ne fonctionne pas avec MSIE car celui-ci ne supporte la règle :hover que pour les éléments liens.

Seconde technique

Pour avoir un effet similaire avec MSIE, il va donc falloir tricher en lui faisant croire que l'image est un lien.

Cette fois elle 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 au préalable modifier l'image pour y faire figurer, l'une en dessous de l'autre, l'image initiale et l'image à apparaître lors du zoom.

Cette méthode a trois inconvénients :

  1. l'image sera plus lourde, donc plus longue à charger ;
  2. l'image n'étant plus insérée à l'aide de l'élément img, il n'est plus possible d'en donner un équivalent textuel via l'attribut "alt". Cet équivalent (description de l'image) doit donc figurer en clair dans le contenu de la page afin que celle-ci respecte les règles d'accessibilité ;
  3. 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="photo d'un papillon machaon butinant une fleur">
         </a>
    </p>
</div>

Image et code CSS

L'image machaon1.jpg a donc été créée avec un logiciel de traitement d'images. Elle a une taille finale de 400x600 pixels pour un poids de 45 ko.

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

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

.zoom1 a:hover {
background-image: url(machaon1.jpg);
background-position: 0px -300px;
background-repeat:no-repeat;
cursor:help;
}
Astuces

margin:0 auto déclaré dans .zoom1 permet de centrer horizontalement l'image dans la page. (Attention : 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

Testez le résultat dans votre navigateur.

image par défaut

Au survol :

image zoomée

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 la partie colorée de l'aile du papillon. L'image (machaon2.jpg) a une taille de 300x450 pixels pour un poids de 31 ko. Cette fois, la « remontée » de l'image ne doit être que de 225 pixels.

Code CSS

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

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

Testez le résultat dans votre navigateur.

Par défaut :

image par défaut

Au survol :

image zoomée

Compléments d'informations

Cette technique d'images « glissantes » appliquée au zoom est inspirée de l'article Les Portes Coulissantes de CSS - Chapitre II. 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 !. (Traductions réalisées par l'équipe de pompage.net.)

Photos 2004 - Pascale Lambert-Charreteur.

Une question, une remarque ? Écrivez à l'auteur à pascale.lambert@openweb.eu.org.

Page valide XHTML 1 Strict, CSS2 et accessible AA.
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi.
Site hébergé par l' APINC et actualités dopées par Dotclear.