Bonsoir!

J'utilise ce code qui est très utile, mais je souhaiterai que l'agrandissement soit progressif. Comment puis-je procéder?

http://www.css-actif.com/t7562-agrandir-l-image-au-passage-du-curseur

Merci bien pour votre aide!

Bonsoir !

Pour que ton agrandissement se fasse de façon progressive, il faut définir une transition sur ton élément survolé. J'invente par exemple dans le code suivant. Attention à bien mettre pour chaque navigateur une propriété avec son préfixe, question de compatibilité (-webkit-, -moz-, -ms-, -o-)

Code:

img:hover {
-moz-transform: scale(4,4);
  -moz-transition-property: -moz-transform; // nom de la propriété sur laquelle on applique une transition
 -moz- transition-duration:2s; //durée de la transition
}

Bonsoir !
Chinelle a presque raison, il faut accompagner la définition CSS de la classe non survolée par les propriétés de transition :

Code:

-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;

Hé oui, les propriétés de transition se définissent dans le sélecteur de base, et non dans celui définissant l'apparence au survol

Il faut également fixer l'apparence de l'image de départ si on veut qu'il y ait une transition d'un état à l'autre, donc préciser que l'image à l'état naturel est à échelle 1.

Donc si ceci se fait sur une image :

Code:

img {
   /* image à l'échelle 1 au départ */
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   /* propriétés de transition */
   -moz-transition:all 1s ease;
   -webkit-transition:all 1s ease;
   -o-transition:all 1s ease;
   transition:all 1s ease;
}

img:hover {
   /* Les propriétés de transformation au survol */
}

Tu peux utiliser cet outil si tu as du mal

Eh bien je l'ignorais mais après réflexion il est vrai qu'il vaut mieux définir les propriétés transition sur l'élément de base afin qu'elles s'appliquent également par héritage à l'élément survolé (ce qui ne se ferait pas dans le cas contraire), afin d'éviter la redondance de code. Pardon pour la confusion, merci Christa =)

Ah super! Merci bien les filles! C'est top top top!

Le sujet portant l'indication "résolu", je déplace. A bientôt.