Appliquer un effet de zoom sur une image avec les CSS

Appliquer un effet de zoom sur une image, à l'aide de CSS2, lors du survol de la souris peut se faire très facilement. Il suffit de combiner le pseudo-élément :hover à la balise img (image).

Hélas, tant que Microsoft Internet Explorer 6 (MSIE6) existera, il faudra utiliser d'autres moyens pour le même résultat. En effet, il n'implémente :hover que pour les liens.

Ce tutoriel décrit deux méthodes pour appliquer un effet de zoom sur une image 100% en CSS, la première simplissime mais inopérante avec MSIE6, la seconde utilisant la technique des « portes coulissantes ».

N'hésitez pas à nous faire part de votre avis sur cet article : 1 commentaire Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Première technique

Fonctionne avec :
  • FireFox ;
  • MSIE 7 + ;
  • Mozilla / SeaMonkey ;
  • Opéra 7 + ;
  • Safari.
Attribut utilisé :
  • img:hover

Code (X)HTML

L'image est déclarée dans le code HTML sans valeurs de taille (ni width, ni height).

 
Sélectionnez

<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 taille 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 dimensions de l'image passeront de 200x267 pixels à 300x400 pixels.

 
Sélectionnez

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

Visionner l'exemple en ligne.

Seconde technique

Fonctionne avec :
  • tous les navigateurs graphiques.
Attributs utilisés :
  • background ;
  • cursor ;
  • display ;
  • height ;
  • margin ;
  • width.

Pour cet âne bâté d'Internet Explorer, il va falloir tricher en faisant croire que l'image est un lien, ce qui est sémantiquement très discutable...
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 :
  • l'image sera plus lourde, donc plus longue à charger ;
  • 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
Sélectionnez

<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 (condensé dans le code dans la déclaration background) ; 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.

 
Sélectionnez

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

Visionner l'exemple en ligne.

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 :

 
Sélectionnez

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

Visionner l'exemple en ligne.

Remerciements

Un grand merci à Benjamin Poinsot pour sa relecture.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

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 © 14/10/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.