6 images au ratio 16/9; retour par un clic sur le montage.
Clic parties colorées.
<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 8px ridge grey; background: url('http://ekladata.com/HGfR3og9XoQZPJSJchvvLUQPcZY/img687.jpg');"><input id="lav1" class="lav" type="text" /> <input id="lav2" class="lav" type="text" /> <input id="lav3" class="lav" type="text" /> <input id="lav4" class="lav" type="text" /> <input id="lav5" class="lav" type="text" /> <input id="lav6" class="lav" type="text" />
<p id="zero"> </p>
<p id="pz0">Clic parties colorées.</p>
<p id="pz1a" class="pza"> </p>
<p id="pz1b" class="pza"> </p>
<p id="pz1c" class="pza"> </p>
<p id="pz1d" class="pza"> </p>
<p id="pz1e" class="pza"> </p>
</div>
<style><!--
#zero{position:absolute; z-index:1; width:1200px; height:675px; margin-top:0px; transform:translate(0px,0px);}
#pz0{ position:absolute; z-index:1;width:300px; font-size:25px; color:lime; text-shadow:1px 1px black; margin-top:0px; transform:translate(50px,20px); }
.lav{position:absolute; z-index:9; width:400px; height:338px; margin-top:0px; border-radius:100px; transition:all 1s;}
#lav1{background:url('http://ekladata.com/2zWF88xZlMZkx9RsTEH5PuaIkU0.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(30px,20px) scale(0.7) rotate(-15deg); box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white;}
#lav2{background:url('http://ekladata.com/cD62Egl5O6b1xtwgYRo1TcCxM-I.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(30px,170px) scale(0.7) rotate(15deg); box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white;}
#lav3{background:url('http://ekladata.com/8QlL135LBUs1_2NCQbJYdfGnmNI.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(30px,320px) scale(0.7) rotate(-15deg); box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white;}
#lav4{background:url('http://ekladata.com/7ibzSuLAhmZlfq_HVR4UTuS39h4.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(780px,20px) scale(0.7) rotate(15deg); box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white;}
#lav5{background:url('http://ekladata.com/znOmZIcl-F-oXawyyEC9XtORwug.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(780px,170px) scale(0.7) rotate(-15deg); box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white;}
#lav6{background:url('http://ekladata.com/Yz1veG5zS6Pz7BaERIQdKfNEme0.jpg'); background-size:1200px 675px; background-position:0px 0px; transform:translate(780px,320px) scale(0.7) rotate(15deg); box-shadow:inset 6px 6px 8px black, inset -6px -6px 8px white;}
.pza{position:absolute; z-index:3; width:400px; height:338px; margin-top:0px; border:4px solid white; border-radius:100px; background:url('http://ekladata.com/2zWF88xZlMZkx9RsTEH5PuaIkU0.jpg'); background-size:1200px 675px; filter:grayscale(1);}
#pz1a{background-position:-400px 0px; transform:translate(400px,-50px) scale(0.5) rotate(10deg); transition:transform 1s 0.1s, filter 1s 0.1s, border-radius 1s 0.1s;}
#pz1b{background-position:-800px 0px; transform:translate(400px,50px) scale(0.5) rotate(-10deg); transition:transform 1s 0.2s, filter 1s 0.2s, border-radius 1s 0.2s;}
#pz1c{background-position:-0px -335px; transform:translate(400px,150px) scale(0.5) rotate(10deg) ;transition:transform 1s 0.3s, filter 1s 0.3s, border-radius 1s 0.3s;}
#pz1d{background-position:-400px -335px; transform:translate(400px,250px) scale(0.5) rotate(-10deg) ;transition:transform 1s 0.4s, filter 1s 0.4s, border-radius 1s 0.4s;}
#pz1e{background-position:-800px -335px; transform:translate(400px,350px) scale(0.5) rotate(10deg) ;transition:transform 1s 0.5s, filter 1s 0.5s, border-radius 1s 0.5s;}
.lav:focus ~ #zero{z-index:20;}
#lav1:focus, #lav2:focus, #lav3:focus,#lav4:focus, #lav5:focus, #lav6:focus{z-index:15; background-position:-2px -2px; margin-top:0px; transform:translate(0px,0px) scale(1) rotate(0deg); border-radius:0px; outline:none; border-color:transparent; box-shadow:none;}
#lav2:focus ~ .pza{background:url('http://ekladata.com/cD62Egl5O6b1xtwgYRo1TcCxM-I.jpg');background-size:1200px 675px;}
#lav3:focus ~ .pza{background:url('http://ekladata.com/8QlL135LBUs1_2NCQbJYdfGnmNI.jpg');background-size:1200px 675px;}
#lav4:focus ~ .pza{background:url('http://ekladata.com/7ibzSuLAhmZlfq_HVR4UTuS39h4.jpg');background-size:1200px 675px;}
#lav5:focus ~ .pza{background:url('http://ekladata.com/znOmZIcl-F-oXawyyEC9XtORwug.jpg');background-size:1200px 675px;}
#lav6:focus ~ .pza{background:url('http://ekladata.com/Yz1veG5zS6Pz7BaERIQdKfNEme0.jpg');background-size:1200px 675px;}
#lav1:focus ~ #pz1a,#lav2:focus ~ #pz1a,#lav3:focus ~ #pz1a,#lav4:focus ~ #pz1a,#lav5:focus ~ #pz1a,#lav6:focus ~ #pz1a{z-index:9; background-position:-400px 0px; transform:translate(400px,0px) scale(1) rotate(0deg);filter:grayscale(0); border:none; border-radius:0px;}
#lav1:focus ~ #pz1b,#lav2:focus ~ #pz1b,#lav3:focus ~ #pz1b,#lav4:focus ~ #pz1b,#lav5:focus ~ #pz1b,#lav6:focus ~ #pz1b{z-index:9;background-position:-800px 0px; transform:translate(800px,0px) scale(1) rotate(0deg);filter:grayscale(0); border:none; border-radius:0px;}
#lav1:focus ~ #pz1c,#lav2:focus ~ #pz1c,#lav3:focus ~ #pz1c,#lav4:focus ~ #pz1c,#lav5:focus ~ #pz1c,#lav6:focus ~ #pz1c{z-index:9;background-position:0px -335px; transform:translate(0px,335px) scale(1) rotate(0deg);filter:grayscale(0); border:none; border-radius:0px;}
#lav1:focus ~ #pz1d,#lav2:focus ~ #pz1d,#lav3:focus ~ #pz1d,#lav4:focus ~ #pz1d,#lav5:focus ~ #pz1d,#lav6:focus ~ #pz1d{z-index:9;background-position:-400px -335px; transform:translate(400px,335px) scale(1) rotate(0deg) ;filter:grayscale(0); border:none; border-radius:0px;}
#lav1:focus ~ #pz1e,#lav2:focus ~ #pz1e,#lav3:focus ~ #pz1e,#lav4:focus ~ #pz1e,#lav5:focus ~ #pz1e,#lav6:focus ~ #pz1e{z-index:9;background-position:-800px -335px; transform:translate(800px,335px) scale(1) rotate(0deg);filter:grayscale(0); border:none; border-radius:0px;}
--></style>