On peut agrandir une image avec la pointe de la souris.
Cet effet de zoom est obtenu par du code html et du CSS.
Dans ce code, "width" et "height" sont les dimensions du cadre virtuel dans lequel s'inscrira le photo et c'est en passant dans ce cadre que la souris aura pour effet de modifier l'image.
Dans cet exemple
width: 320px;
height: 240px;
CODE
En bleu: html
En marron: CSS entre les balises <style> et </style>
<div class=zoom><style>.zoom {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est doublée */
-webkit-transform:scale(2); /* Safari et Chrome */
-moz-transform:scale(2; /* Firefox */
-ms-transform:scale(2; /* Internet Explorer 9 */
-o-transform:scale(2; /* Opera */
transform:scale(2;
}</style>
<div class=image>
<img src=http://img.over-blog-kiwi.com/1/30/51/51/20161128/ob_b6220b_l3.jpg alt=Text de remplacement/>
</div>
</div>
RESULTAT
Haut de page