Diapo PE2

9 images en 1920x1080px

<div style="position: absolute; z-index: 100; width: 100vw; height: 56.25vw; left: 0; top: 18vw; overflow: hidden; text-align: left;"><input id="ccc" type="text" value="Clic" /> <input id="hg" class="rond" type="text" /> <input id="hc" class="rond" type="text" /> <input id="hd" class="rond" type="text" /> <input id="mg" class="rond" type="text" /> <input id="mc" class="rond" type="text" /> <input id="md" class="rond" type="text" /> <input id="bg" class="rond" type="text" /> <input id="bc" class="rond" type="text" /> <input id="bd" class="rond" type="text" />
<p id="coul"><img class="mg" src="http://ekladata.com/J7xru4GSrf7E1NAnAiLtM42cJAc.jpg" alt="" /> <img class="mg" src="http://ekladata.com/RUW-CyRBVhW4Sy0NPLBY2wMMeRg.jpg" alt="" /> <img class="mg" src="http://ekladata.com/IvOpH5sokg79kza5XAp1lE6hxts.jpg" alt="" /><br /> <img class="mg" src="http://ekladata.com/ceAtYlbMoHdfWZ4TYCY2O6cLs3c.jpg" alt="" /> <img class="mg" src="http://ekladata.com/Rmrvy9E9rtgWmrcSMB9nv0sElmk.jpg" alt="" /> <img class="mg" src="http://ekladata.com/Q6_tEQHQZQm7Z-G6xGIkfLKWGY8.jpg" alt="" /><br /> <img class="mg" src="http://ekladata.com/7vKStOAY7xRzedH1u5p_zfdMGrw.jpg" alt="" /> <img class="mg" src="http://ekladata.com/YtihZs5NxZ063kyWp8vZFYZciIE.jpg" alt="" /> <img class="mg" src="http://ekladata.com/3tb4OEPQt3eHYW7iMrP5Cpt1aQA.jpg" alt="" /></p>
</div>

<style><!--
#ccc{position:absolute; z-index:110; width:3vw; font-size:1.5vw; text-shadow:0.1vh 0.1vh black; transform:translate(92.5vw,5vw);}
.rond{position:absolute; z-index:110; width:2vw; height:2vw; border-radius:50%; background:white;}
#hg{transform:translate(90vw,8vw);}
#hc{transform:translate(93vw,8vw);}
#hd{transform:translate(96vw,8vw);}
#mg{transform:translate(90vw,11vw);}
#mc{transform:translate(93vw,11vw);}
#md{transform:translate(96vw,11vw);}
#bg{transform:translate(90vw,14vw);}
#bc{transform:translate(93vw,14vw);}
#bd{transform:translate(96vw,14vw);}
#coul{width:305vw; height:170vw; transform:translate(0vw,0vw); transition:all 2s linear;}
.rond:focus{background:red;}
#hg:focus ~ #coul{transform:translate(0vw,0vw);}
#hc:focus ~ #coul{transform:translate(-100vw,0vw);}
#hd:focus ~ #coul{transform:translate(-200vw,0vw);}
#mg:focus ~ #coul{transform:translate(0vw,-56.25vw);}
#mc:focus ~ #coul{transform:translate(-100vw,-56.25vw);}
#md:focus ~ #coul{transform:translate(-200vw,-56.25vw);}
#bg:focus ~ #coul{transform:translate(0vw,-112.5vw);}
#bc:focus ~ #coul{transform:translate(-100vw,-112.5vw);}
#bd:focus ~ #coul{transform:translate(-200vw,-112.5vw);}
--></style>