Exemple 143

Toujours avec le même montage; l'ouverture des images se fait en plein écran au clic.

Codes à comparer car peu différents.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/L5uElSrZ6ebzqqrLjCJ9sX9V6Pc.jpg'); background-size: cover;"><input id="cde1" class="cde" type="text" /> <input id="cde2" class="cde" type="text" /> <input id="cde3" class="cde" type="text" /> <input id="cde4" class="cde" type="text" /> <img id="ptc1" class="ptc" src="http://ekladata.com/lzUoOR_WhO2iObbPX__Y5FPfj8Q.jpg" alt="" /> <img id="ptc2" class="ptc" src="http://ekladata.com/qiSIKXkNZXxLoQ0TDKO1XP-f5Jk.jpg" alt="" /> <img id="ptc3" class="ptc" src="http://ekladata.com/w1zhbRqwDvWM1d5G2ApqoyyOejM.jpg" alt="" /> <img id="ptc4" class="ptc" src="http://ekladata.com/UxoQ2kvFy4Ui2fcJiptH-zLguIU.jpg" alt="" /></div>

<style><!--
.cde{position:absolute; z-index:10; border-radius:50%; width:1.5vw; height:1.5vw; border:none; background:coral; box-shadow:inset -0.4vh -0.4vh 0.6vh black;}
#cde1{transform:translate(57vw,1vw);}
#cde2{transform:translate(57vw,4vw);}
#cde3{transform:translate(57vw,7vw);}
#cde4{transform:translate(57vw,10vw);}
.cde:hover{background:lime;}
.ptc{position:absolute; z-index:100; width:0vw; height:0vw; transform:translate(30vw,17vw); transition:all 1s linear;}
#cde1:focus ~ #ptc1,#cde2:focus ~ #ptc2,#cde3:focus ~ #ptc3,#cde4:focus ~ #ptc4{width:100vw; height:56.25vw; left:0; transform:translate(0vw,0vw);}
--></style>