En-tete Astuces divers html et css
Classic Moderne

Un effet de zoom en css sur image:



Mon Chat photo 1
Mon Chat photo 2
Mon Chat photo 3


Dans ce tutoriel, je suis parti avec les photos originales, c’est à dire sans avoir besoin de modifier leurs tailles.
Pour info ces images font respectivement 3000px de large sur 4000px de haut.

Il est préférable de choisir la même orientation d'image ne mélangez pas une orientation "portrait" avec des "paysages", la dimension importe peu, par contre 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>


Donnez un nom explicite à votre class.
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="Nom_Images.jpg" title="Titre de l'image" alt="Description de l'image"/> </div>

<div class="image"> <img src="Nom_Images.jpg" title="Titre de l'image" alt="Description de l'image"/> </div>

<div class="image"> <img src="Nom_Images.jpg" title="Titre de l'image" alt="Description de l'image"/> </div>


Ce n'est pas bien compliqué, il faut juste insérer une div avec le même attribut pour chaque image dans le conteneur créé plus haut. .

Passons maintenant au CSS.
Tout d'abord plaçons notre conteneur à images avec ses propriétés :


.conteneur_images
{
background:#dadada;
border: 4px ridge black;
height: 170px;
margin: 0 auto;
width: 381px;
}


J'ai choisi d'y mettre un fond gris 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.

Ci-dessous le code pour chaque image, code qui affiche les images en miniature.


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


Tout d'abord, j'indique un float left, pour placer mes images en horizontal sinon elles se placeront à la verticale.

On retrouve la marge de 10px qui est optionnel, mais qui permet d'avoir un espace entre chaque photo pour plus de clarté.

Ensuite les largeurs et hauteurs sont ici pour redimensionner mes images, c’est à dire que mes images au départ ont une taille comprise entre 3000px de large par 4000px de haut vont se retrouver réduite en 107px de large par 150px de haut 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:#dadada;
border: 4px ridge 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 !

Pour finir je m’aperçois sur la page que d’autre image subisse le même sort que mon chat,
Ceci n’est pas le but recherché, car mon bandeau et mon retour d’image comporte eux aussi une image, et donc subisse des effets qui ne me plaise pas.

Pour régler cela je rajoute un "id= zoom" à la balise "img" de mon code HTML, ainsi que dans mon code CSS comme ceci : "immg#zoom" et "img#zoom:hover".

Problème réglé. Le zoom sur les images ne s'applique plus dorénavant qu’aux images de la div conteneur.

Mon code HTML complet

< div class="conteneur_images" >

< div class="image > < img src="Nom_Images.jpg" title="Titre de l'image" alt="Description de l'image"/ > < /div >

< div class="image > < img src="Nom_Images.jpg" title="Titre de l'image" alt="Description de l'image"/ > < /div >

< div class="image > < img src="Nom_Images.jpg" title="Titre de l'image" alt="Description de l'image"/ > < /div >

< /div >


Mon code CSS complet


.conteneur_images
{
background:#dadada;
border: 4px ridge black;
height: 170px;
margin: 0 auto;
width: 381px;
}

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

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

img#zoom:hover
{
background:#dadada;
border: 4px ridge black;
height: 250%;
left: -110px;
padding: 3px;
position: relative;
top: -50px;
width: 250%;
}


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.










Haut-de-Page