Principe Clic et Survol

Exemple du code "Stormalo"  "Clic et Survol" sur une seule image.

Clic sur le bouton A pour déplacer l'image cs1; ensuite, survol de cette image déplacée pour l'agrandir.

Un clic sur l'image agrandie remet le montage en position de départ.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh solid black; margin: 2vh auto;"><input id="bt1" type="text" value="A" /> <img id="cs1" src="http://ekladata.com/YSL8b8enG7n8pXwLcKebalAJNLQ@800x450.jpg" alt="" /></div>

<style><!--
#bt1{position:absolute; z-index:5; width:2vw; height:2vw; text-align:center; font-size:2vw; transform:translate(57vw,1vw);}
#cs1{position:absolute; z-index:1; width:16vw; height:9vw; transform:translate(0vw,0vw); transition:all 1s linear;}
#bt1:focus ~ #cs1{transform:translate(22vw,15vw);}
#bt1:focus ~ #cs1:hover{width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
--></style>

Le bouton bt1 commande l'image cs1 directement pour la translation.

Le bouton bt1 permet l'animation de l'image cs1 au survol.