Zoom

Un rappel d'un code qui avait été repris par un fidèle visiteur: l'agrandissement de l'image de fond au survol en conservant les dimensions du cadre.

J'ai ajouté un second exemple pour rappeler que l'on peut choisir la position de l'image agrandie afin de zoomer sur un détail particulier.

Il faut utiliser des images assez grandes pour qu'elles restent nettes à l'agrandissement.

<div id="zm">&nbsp;</div>
<div id="zm1">&nbsp;</div>
<style><!--
#zm{width:1000px; height:563px; border:4px ridge grey; margin:30px auto; text-align:left; background:url('https://ekladata.com/gFwG3RuFNOCLe7VBTQwaGlUfzBg.jpg'); background-size:100%; background-position:50% 50%; transition:all 1s;}
#zm:hover{background-size:200%;}
#zm1{width:1000px; height:563px; border:4px ridge grey; margin:30px auto; text-align:left; background:url('https://ekladata.com/p545PWG6OTr53R6r8SW_2b70Gko.jpg'); background-size:100%; background-position:50% 50%; transition:all 1s;}
#zm1:hover{background-size:200%; background-position:100% 40%;}
--></style>