Exemple 44

7 images au ratio 16/9 redimensionnées par le code en 1152x648px.

Clic sur chaque galet sans faire tomber les autres.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; background: linear-gradient(to bottom, rgba(0,100,200,0.8) 0%, rgba(0,100,200,0.3) 100%); text-align: left;"><input id="gal1" type="text" /> <input id="gal2" type="text" /> <input id="gal3" type="text" /> <input id="gal4" type="text" /> <input id="gal5" type="text" /> <input id="gal6" type="text" /> <input id="gal7" type="text" />
<p id="clic">Clic sur chaque galet sans faire tomber les autres.</p>
<img id="li1" class="li" src="http://ekladata.com/lKccVIQfrqSrDiFSyZFgemSgqdc@1152x648.jpg" alt="" /> <img id="li2" class="li" src="http://ekladata.com/r8WN84CTi2rwJsJE8vqW9JmnrGI@1152x648.jpg" alt="" /> <img id="li3" class="li" src="http://ekladata.com/tuK142Y2WQH8SusaAvhvGVeSWwM@1152x648.jpg" alt="" />
<img id="li4" class="li" src="http://ekladata.com/6rlK7rsXyaTrdMX58D4ml6bIDdI@1152x648.jpg" alt="" />
<img id="li5" class="li" src="http://ekladata.com/307yCssYu4Oc4KB-Ix-F1bqvvtg@1152x648.jpg" alt="" />
<img id="li6" class="li" src="http://ekladata.com/sYOE3sa24EQPbejQTCd1sdo-tlQ@1152x648.jpg" alt="" />
<img id="li7" class="li" src="http://ekladata.com/DJtCPWcyzwKs1Omo6BYwl3_I9kM@1152x648.jpg" alt="" />
</div>
<style><!--
#gal1{position:absolute; z-index:1; width:40vw; height:6vw; border:none; border-radius:3vw 5vw 9vw 8vw; background:grey; box-shadow:inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.6vh white; transform:translate(10vw,27vw);}
#gal2{position:absolute; z-index:1; width:10vw; height:12vw; border:none; border-radius:3vw 5vw 3vw 8vw; background:grey; box-shadow:inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.6vh white; transform:translate(18vw,14.2vw) rotate(35deg);}
#gal3{position:absolute; z-index:1; width:8vw; height:13vw; border:none; border-radius:8vw 2vw 6vw 8vw; background:grey; box-shadow:inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.6vh white; transform:translate(32vw,14.5vw) rotate(-30deg);}
#gal4{position:absolute; z-index:1; width:30vw; height:5vw; border:none; border-radius:50%; background:grey; box-shadow:inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.6vh white; transform:translate(15vw,8.8vw) rotate(1deg);}
#gal5{position:absolute; z-index:1; width:5vw; height:5vw; border:none; border-radius:1vw 2vw 3vw 3vw; background:grey; box-shadow:inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.6vh white; transform:translate(28vw,3.8vw) rotate(40deg);}
#gal6{position:absolute; z-index:1; width:5vw; height:5vw; border:none; border-radius:2vw 3vw 1vw 2vw; background:grey; box-shadow:inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.6vh white; transform:translate(18vw,4.2vw) rotate(-9deg);}
#gal7{position:absolute; z-index:1; width:5vw; height:5vw; border:none; border-radius:2vw 5vw 3vw 3vw; background:grey; box-shadow:inset -0.4vh -0.4vh 0.8vh black, inset 0.4vh 0.4vh 0.6vh white; transform:translate(39vw,4.8vw) rotate(9deg);}
#clic{position:absolute; z-index:1; font-size:1.5vw; color:white; text-shadow:0.2vh 0.2vh black;}
.li{position:absolute; z-index:5; width:0vw; height:0vw; transform:translate(30vw,17vw); transition:all 1s linear;}
#gal1:focus ~ #li1,#gal2:focus ~ #li2,#gal3:focus ~ #li3,#gal4:focus ~ #li4,#gal5:focus ~ #li5,#gal6:focus ~ #li6,#gal7:focus ~ #li7{width:60vw; height:33.75vw;transform:translate(0vw,0vw);}
--></style>