Zoom d’images avec les CSS

Openweb.eu.org > Articles  > Zoom d’images avec les CSS

Abstract

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.

Article

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 6 car celui-ci ne supporte la règle :hover que pour les éléments liens. En revanche, MSIE 7 l'implémente parfaitement.

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="/articles/zoom_image/#"
         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, en modifiant la propriété « inline » par défaut de la balise a, 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, le choix porte sur le zoom de 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.

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant
  • Technologie : CSS
  • Thème : Mise en page, Multimédia
  • Auteur :
  • Publié le :
  • Mise à jour : 29 juin 2008
  • 6 commentaires

Vos commentaires

  • sophie Le 21 septembre 2012 à 20:46

    bonjour j’ai creer un site sur les revues chevaux et je voudrais que les personnes zoom sur l’image pour pouvoir lire correctement le sommaire , pouvais vous m’aider svp merci d’avance
    http://magazine-chevaux-du-monde.e-monsite.com/

    mylife47300@hotmail.fr

  • Pascale Lambert Charreteur Le 22 septembre 2012 à 16:44

    Bonjour Sophie,

    La règle première est de ne surtout pas faire de sommaire en image ! Du texte doit être du texte et dès le départ il doit être écrit dans une taille suffisante pour être lu sans effort.
    Conclusion : si on ne peut pas le lire facilement sans l’agrandir, c’est qu’il faut le refaire et/ou repenser l’agencement de votre page.

    (un conseil : évitez de mettre votre adresse email ainsi en pâture dans des commentaires : vous éviterez le spam !)

  • Illirea Le 3 septembre 2013 à 10:06

    Bonjour j’essai de faire le principe de zoom au survol cependant je voudrait que le zoom apparaisse a gauche de ma vignette voici un exemple : http://adsdesignstudio.fr/cp/2.html

    J’ai utilisé le code de la page pour m’aider le hic c’est que le zoom au survol ne fonctionne pas xD

    Pourriez vous m’aider ?

  • Pascale Lambert Charreteur Le 5 septembre 2013 à 10:42 En réponse à : Illirea

    Bonjour,

    Sans doute avez-vous trouvé la solution car je ne vois pas de dysfonctionnement...

  • Lena Le 8 octobre 2013 à 22:32

    Bonjour,
    J’aimerais savoir comment coder en CSS le zoom sur une image en particulier.
    En effet, quand je code dans mon fichier CSS, toutes les images zoom. Mais je n’arrive pas à "choisir" quelle image je veux zoomer, et quelle image je ne veux pas zoomer.
    Merci de votre aide !

  • Lena Le 8 octobre 2013 à 22:35

    Bonjour,
    J’aimerais savoir comment zoomer une image en particulier en CSS.
    En effet, sur mon fichier CSS, quand j’ajoute le code pour pour zoomer les images, toutes les images de mon site HTML se zooment. Savez vous comment faire pour pouvoir choisir quelle image je désire zoomer et quelle image je ne désire pas zoomer ?
    Merci de votre aide !

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom