Zoom au survol d’une image

Avec CSS 3 il est assez simple de réaliser un effet zoom au survol d’une image

Cela apporte un peu de dynamisme sur les pages et attire l’attention des visiteurs 😉

Pour zoomer, c’est la propriété « transform » de  CSS3 qu’il convient d’utiliser. Comme son nom l’indique elle va transformer un élément. Avec le mot clef « scale », on pourra alors agrandir une image. Si l’on veut grossir l’image de 25% supplémentaire on aura : transform:scale(1.25)

Il ne reste plus qu’à donner l’effet de zoom avec un agrandissement de l’image. On utilise sur l’image la propriété CSS3 transition qui permet de définir un effet de transition lors de la modification d’un l’élément. L’effet ease indique une transition avec un départ lent, puis un mouvement rapide et une fin plus lente, donnant ainsi l’impression de zoom : transition: all 1s ease

Exemple :

http://www.renault.fr/gamme-renault/vehicules-particuliers/twingo/twingo/

http://www.fnac.com/