31.8.23 variante

Variante du code précédent avec une animation différente.

CLIC

<div style="width: 1200px; height: 675px; border: 6px ridge grey; box-shadow: 4px 4px 12px black; margin: 30px auto; text-align: left; background: url('http://ekladata.com/O9lk8hfFUEy4uga35d_bk98w_kw.jpg'); background-size: cover;">
<p id="jar0">CLIC</p>
<input id="jar1" class="jar" type="text" /> <input id="jar2" class="jar" type="text" /> <input id="jar3" class="jar" type="text" /> <input id="jar4" class="jar" type="text" /> <input id="jar5" class="jar" type="text" /> <input id="jar6" class="jar" type="text" /> <input id="jar7" class="jar" type="text" /> <input id="jar8" class="jar" type="text" /> <img id="din1" class="din" src="http://ekladata.com/zYd6JdRkKM0sbhZNHreMQKwh9Q4.jpg" alt="" /> <img id="din2" class="din" src="http://ekladata.com/n2hLvOCB1-8RqZ3zk9KzYIr8dBk.jpg" alt="" /> <img id="din3" class="din" src="http://ekladata.com/zMkTCAvPg8118rAHK7e_9Odo8mQ.jpg" alt="" /> <img id="din4" class="din" src="http://ekladata.com/5mmZNQg4PiPJem-eMxETSCTs7ao.jpg" alt="" /> <img id="din5" class="din" src="http://ekladata.com/t2IsSIawF6HIpgG8Kv7AjzfmQC0.jpg" alt="" /> <img id="din6" class="din" src="http://ekladata.com/n1WK5ZfenHqo46UCzRtz8wgD9WY.jpg" alt="" /> <img id="din7" class="din" src="http://ekladata.com/A2-Bq_-65xjA5Cu7vloALN_Nwl0.jpg" alt="" /> <img id="din8" class="din" src="http://ekladata.com/v0zfmddTwt6lAec6NW8ZIRfk5Fo.jpg" alt="" /></div>
<style><!--
#jar0{position:absolute; z-index:10; width:100px; font-size:30px; color:white; text-shadow:1px 1px black; transform:translate(50px,0px);}
.jar{position:absolute; z-index:10; width:30px; height:30px; border-radius:50%; border:none; background:white; box-shadow:inset 3px 3px 4px black;}
#jar1{transform:translate(250px,10px);}
#jar2{transform:translate(350px,10px);}
#jar3{transform:translate(450px,10px);}
#jar4{transform:translate(550px,10px);}
#jar5{transform:translate(650px,10px);}
#jar6{transform:translate(750px,10px);}
#jar7{transform:translate(850px,10px);}
#jar8{transform:translate(950px,10px);}
.din{position:absolute; z-index:1; width:0px; height:0px; filter:grayscale(1); transition:all 2s, filter 1s 1s;}
#din1,#din3,#din5,#din7{transform:translate(0px,337px) rotatey(90deg);}
#din2,#din4,#din6,#din8{transform:translate(1200px,337px) rotatey(90deg);}
.jar:focus{background:green;}
#jar1:focus ~ #din1,#jar2:focus ~ #din2,#jar3:focus ~ #din3,#jar4:focus ~ #din4,#jar5:focus ~ #din5,#jar6:focus ~ #din6,#jar7:focus ~ #din7,#jar8:focus ~ #din8{z-index:5; width:1200px; height:675px; transform:translate(0px,0px) rotatey(0deg); filter:grayscale(0);}
--></style>