ICI header("Location: http://www.mytesting.fr ");

COMMENT AGRANDIR UNE IMAGE AU PASSAGE DE LA SOURIS

par André MARINI 28 Novembre 2016, 19:35 Images

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

Text

Haut de page