<div class=zoom> <div class=image> <img src="http://isarta.com/infos/wp-content/uploads/2017/05/couleurs_Fotolia_118879445_S-1.jpg" alt=Text de remplacement width="500" height=""/> </div> </div> <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 grossie de 25% */ -webkit-transform:scale(1.25); /* Safari et Chrome */ -moz-transform:scale(1.25); /* Firefox */ -ms-transform:scale(1.25); /* Internet Explorer 9 */ -o-transform:scale(1.25); /* Opera */ transform:scale(1.25); } </style>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter