Bonjour à tous ;)

Comment réaliser un effet de zoom au survol de la souris très simplement en css sur une image sans l'aide de script ou tout autre programmation.
C'est une question que je rencontre assez régulièrement dans les forums, alors je m'y suis collé pour vous faire quelque chose de très simple et surtout :

Compatible avec tous les navigateurs et respectueux des standard du web.

Ce tutoriel, ou plutôt la page de test a été passé au validateur W3C.
Cet effet de zoom à été testé avec IE7, IE8, firefox, google chrome, safari, opéra.

Alors allons y !

Voir l'effet que cela donne dans votre navigateur en cliquant ici.


Dans ce tutoriel, je suis partis avec les photos originales, cet à dire sans avoir besoin de modifier leurs tailles.
Pour info ces images font respectivement 1500 x 1176 px, 1500 x 1000 px, et 1280 x 960 px .
Il est préférable de choisir la même orientation d'image pour ce tutoriel, la dimension importe peu, par contre ne mélangez pas une orientation "portrait" avec des "paysages", vous aurez des déformations sur vos images selon le choix de tailles dans vos codes css !

Pour réaliser cet effet, nous allons créer un conteneur qui va nous servir à insérer nos images et ainsi pouvoir placer cet élément dans la page.
Ce conteneur le voici :

<div class="conteneur_images"></div>

Pas de complication, juste une div avec un nom explicite pour la class, vous pouvez bien sur choisir un autre nom.

Ensuite l'idée pour parvenir à avoir cet effet de zoom correct, et de placer chaque image dans une div.
Comme ceci :

<div class="image"><img src="pied.jpg" title="Des pieds à la plage !" alt="des pieds"/></div>

<div class="image"><img src="velo.jpg" title="Des vélos en atente de location !" alt="des vélos"/></div>

<div class="image"><img src="cerf_volant.jpg" title="Un cerf volant !" alt="cerf volant"/></div>

Rien de compliqué, il faut juste insérer une div avec le même attribut pour chaque image.

Ce qui vous fera au final une structure html comme celle-ci :
<div  class="conteneur_images">

     <div class="image"><img src="pied.jpg" title="Des pieds à la plage !" alt="des pieds"/></div>

     <div class="image"><img src="velo.jpg" title="Des vélos en atente de location !" alt="des vélos"/></div>

     <div class="image"><img src="cerf_volant.jpg" title="Un cerf volant !" alt="cerf volant"/></div>

</div>

Passons maintenant au CSS.

Tout d'abord plaçons notre conteneur à images avec ses propriétés :

.conteneur_images {
    background:#FFFFFF;
    border: 1px solid black;
    height: 127px;
    margin: 0 auto;
    width: 510px;
}

J'ai choisi d'y mettre un fond blanc ainsi qu'une bordure pour le styler, c'est bien sur tout à fait optionnel.
La marge automatique est là pour centrer mon conteneur dans l'élément.

Par contre il est important de bien définir la largeur et la hauteur:
la largeur doit correspondre à l'addition de chaque élément d'image plus les marges, attention il ne s'agit pas de la dimension de vos images, mais de la dimension que vous allez définir dans le code de chaque image.

Pour faire plus clair, la largeur ici de 510px correspond à l'addition du width du code "image" plus l'addition de chaque marge attribué à chaque image !
Autrement dit (voyez le code "image" plus bas) j'ai trois images, donc 3 x 150 = 450, plus l'addition de chaque marge, trois blocs d'images avec chacune 10px de chaque coté, donc 3 x 20 = 60, ce qui nous fait un total de 450 + 60 = 510px.

Pour la hauteur, dans le code image j'ai mis un height de 127px plus deux marges de 10px.
un bloc d'image pour la hauteur à 107px + deux marges haut et bas à 10px chacune = 127px.

Si vous ne comprenez pas, n'hésitez pas à me le dire dans les commentaires ;)

Le code pour chaque image.
Code qui affiche les images en miniature.

.image {
    float: left;
    height: 107px;
    margin: 10px;
    width: 150px;
}

Tout d'abord, j'indique un float left, pour placer mes images en horizontal sinon elles se placeront à la vérticale.
On retrouve la marge de 10px qui est optionnel, mais qui permet d'avoir un espace entre chaque photos pour plus de clarté.
Ensuite les largeurs et hauteurs sont ici pour redimensionner mes images, cet à dire que mes images au départ ont une taille comprise entre 1500 et 960 px vont se retrouver réduite en 150 par 107px sans avoir recours à un quelconque logiciel.

Le code pour la balise "img"

img {
    height: 100%;
    width: 100%;
}

j'indique ici que je veux que mes images occupe la totalité de l'espace défini par les dimensions du code "image".

Le code qui nous intéresse et qui nous permet le zoom.

img:hover {
    background:#FFFFFF;
    border: 1px solid black;
    height: 250%;
    left: -110px;
    padding: 3px;
    position: relative;
    top: -50px;
    width: 250%;
}

J'indique tout simplement un hover sur ma balise img.
Ensuite mes choix optionnels tel que le background et la bordure.

Le zoom est réalisé tout simplement en définissant un pourcentage plus important sur les hauteur et largeur avec 250%, mettez y le pourcentage qui vous plait.

Le positionnement d'image n'est pas forcément obligatoire, c'est juste un choix personnel qui permet de remonter l'image avec le top à -50px et la centrer avec un left à -110px. Si vous n'en mettez pas l'image partira du coin supérieur gauche !

Le plus important ici est la position relative, celle-ci permet d'afficher correctement l'image dans la taille que vous définissez dans ce code.
Si vous mettez une position absolute, celle-ci ne dépendra plus de son conteneur et s'affichera dans sa taille réelle, enfin plus précisément dans sa taille réelle mais avec le pourcentage définie dans le code hover, peut être pas évident à comprendre si vous débutez en css... bref suivez le tuto à la lettre et tous se passera bien.(c'était juste une parenthèse et précision !) ;)

Résumé du css

Voici le css intégral qui permet le zoom.

.conteneur_images {
    background:#FFFFFF;
    border: 1px solid black;
    height: 127px;
    margin: 0 auto;
    width: 510px;
}
.image {
    float: left;
    height: 107px;
    margin: 10px;
    width: 150px;
}
img {
    height: 100%;
    width: 100%;
}
img:hover {
    background:#FFFFFF;
    border: 1px solid black;
    height: 250%;
    left: -110px;
    padding: 3px;
    position: relative;
    top: -50px;
    width: 250%;
}

Voila, j'espère que ce tutoriel vous à aidé, n'hésitez pas à me laisser un commentaire s'il vous à plus ou bien si vous rencontrez des erreurs ou si vous n'y arriver pas !