image cachée

Pour Noisette 16000.

Quelque part, sur cette image, se cache une image invisible qui s'agrandira au survol; à vous de chercher où elle se trouve !

<p id="n1"><img id="n2" src="http://ekladata.com/p0bCbfd10F0T1tewv0e4XQaXJI0.jpg" alt="" /></p>
<style><!--
#n1{width:80vw; height:80vh; margin:0vh auto; background:url('http://ekladata.com/LggxdMHJIprcNQMwC0WQ5qMztqM.jpg'); background-size:cover;}
#n2{width:4vw; height:8vh; border-radius:50%;transform:translate(34vw,21vh); background:url('http://ekladata.com/p0bCbfd10F0T1tewv0e4XQaXJI0.jpg'); background-size:cover; transition:all 2s linear; opacity:0;}
#n2:hover{width:80vw; height:80vh; border-radius:0%; transform:translate(0vw,0vh); opacity:1;}
--></style>

Je profite de ce montage pour essayer d'apprivoiser les codes "adaptatifs", qui s'adaptent à la taille de l'écran qui visionne.

L'image visible et l'image cachée sont, à l'origine, des images en 1920x1080px, au rapport 16/9, réduite de 80%.

L'image visible est placée en fond de cadre et l'image cachée est réduite en taille, rendue transparente et déplacée où vous le souhaitez; a son survol, elle redevient opaque et à ses dimensions paramétrées.