Exemple 151

Clic sur chaque morceau du tressage, obtenu par application d'un filtre de The Gimp.  1+9 images au ratio 16/9, dimensionnées en 1152x648px par le code.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: url('http://ekladata.com/dgKUGlZhQduJ6XwyX9GCqELmVaw@1152x648.jpg'); background-size: cover;"><input id="aut1" class="aut" type="text" /> <input id="aut2" class="aut" type="text" /> <input id="aut3" class="aut" type="text" /> <input id="aut4" class="aut" type="text" /> <input id="aut5" class="aut" type="text" /> <input id="aut6" class="aut" type="text" /> <input id="aut7" class="aut" type="text" /> <input id="aut8" class="aut" type="text" /> <input id="aut9" class="aut" type="text" />
<p id="automn1" class="automn">&nbsp;</p>
<p id="automn2" class="automn">&nbsp;</p>
<p id="automn3" class="automn">&nbsp;</p>
<p id="automn4" class="automn">&nbsp;</p>
<p id="automn5" class="automn">&nbsp;</p>
<p id="automn6" class="automn">&nbsp;</p>
<p id="automn7" class="automn">&nbsp;</p>
<p id="automn8" class="automn">&nbsp;</p>
<p id="automn9" class="automn">&nbsp;</p>
</div>

<style><!--
.aut{position:absolute; z-index:2; width:20vw; height:11.25vw; border:none; background:transparent;}
#aut1{transform:translate(0vw,0vw);}
#aut2{transform:translate(20vw,0vw);}
#aut3{transform:translate(40vw,0vw);}
#aut4{transform:translate(0vw,11.25vw);}
#aut5{transform:translate(20vw,11.25vw);}
#aut6{transform:translate(40vw,11.25vw);}
#aut7{transform:translate(0vw,22.5vw);}
#aut8{transform:translate(20vw,22.5vw);}
#aut9{transform:translate(40vw,22.5vw);}
.automn{position:absolute; z-index:1; width:20vw; height:11.25vw; opacity:0; filter:grayscale(1); transition: opacity 0s linear 0s, filter 1s linear 1.5s, transform 1s linear 0.5s, width 1s linear 0.5s, height 1s linear 0.5s, background 1s linear 0.5s;}
#automn1{background:url('http://ekladata.com/1Lill6Xg9pgWiwMNvoJXm89rEM8@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#automn2{background:url('http://ekladata.com/bzf9mOjvWBsCSI-n1oNl2sUuegQ@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-20vw 0vw; transform:translate(20vw,0vw);}
#automn3{background:url('http://ekladata.com/3C98o98nIwifEzTkz2Xyw0rg3zo@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-40vw 0vw; transform:translate(40vw,0vw);}
#automn4{background:url('http://ekladata.com/m67hAxkbxInlZYLxFyV1p5CdPhM@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -11.25vw; transform:translate(0vw,11.25vw);}
#automn5{background:url('http://ekladata.com/HQ2jy5b4RFGBhHEdw9YUBr6aXlQ@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-20vw -11.25vw; transform:translate(20vw,11.25vw);}
#automn6{background:url('http://ekladata.com/WKMe0VSwzPC-Tbzl8z3OSSP3Odc@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-40vw -11.25vw; transform:translate(40vw,11.25vw);}
#automn7{background:url('http://ekladata.com/uhdreKGROGYCNVY2xTv5tEh0QRE@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -22.5vw; transform:translate(0vw,22.5vw);}
#automn8{background:url('http://ekladata.com/F6V9KQQWGljO6gjwnUovyp3_IVQ@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-20vw -22.5vw; transform:translate(20vw,22.5vw);}
#automn9{background:url('http://ekladata.com/kS9BwqlNHaGllHT2_5WJ-J0fiKo@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-40vw -22.5vw; transform:translate(40vw,22.5vw);}
#aut1:focus ~ #automn1,#aut2:focus ~ #automn2,#aut3:focus ~ #automn3,#aut4:focus ~ #automn4,#aut5:focus ~ #automn5,#aut6:focus ~ #automn6,#aut7:focus ~ #automn7,#aut8:focus ~ #automn8,#aut9:focus ~ #automn9{z-index:5; opacity:1; filter:grayscale(0); width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
--></style>