Montage 287

8 images au ratio 16/9.

C
L
I
C

<div style="width: 900px; height: 506px; margin: 1vh auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/8H_jhohPNQNwPmN3GPEYR--2caY.jpg'); background-size: cover;">
<input id="cx1" class="cx" type="text" />
<input id="cx2" class="cx" type="text" />
<input id="cx3" class="cx" type="text" />
<input id="cx4" class="cx" type="text" />
<input id="cx5" class="cx" type="text" />
<input id="cx6" class="cx" type="text" />
<input id="cx7" class="cx" type="text" />
<p id="dsc">C<br /> L<br /> I<br /> C</p>
<img id="fig1" class="fig" src="http://ekladata.com/ho-eVbYmLXPoJtQnC6VyGyoGY9Q.jpg" alt="" />
<img id="fig2" class="fig" src="http://ekladata.com/MGfvwr8nxKvLqBikv-1xDURD--Q.jpg" alt="" />
<img id="fig3" class="fig" src="http://ekladata.com/ZJZbQu7al7Y0vhhylo7b5x8XGng.jpg" alt="" />
<img id="fig4" class="fig" src="http://ekladata.com/s8-VRye0nzy8OrDHU6yZv7yyaGs.jpg" alt="" />
<img id="fig5" class="fig" src="http://ekladata.com/CetExaCB7uyDAarFqMh509CGtqQ.jpg" alt="" />
<img id="fig6" class="fig" src="http://ekladata.com/cu7IuEXpy4_E67EdUgpMUwB99dk.jpg" alt="" />
<img id="fig7" class="fig" src="http://ekladata.com/rTOSIq-OX-xi3eMfEysLKTL-LmQ.jpg" alt="" />
</div>
<style><!--
#dsc{position:absolute; z-index:1; width:40px; height:506px; background:rgba(0,0,0,0.3); text-align:center; font-size:20px; transform:translate(860px,0px); color:white; text-shadow:1px 1px black;}
.cx{position:absolute; z-index:2; width:20px; height:20px; border:none; border-radius:50%; box-shadow:inset 1px 1px 5px black;}
#cx1{transform:translate(870px,150px);}
#cx2{transform:translate(870px,190px);}
#cx3{transform:translate(870px,230px);}
#cx4{transform:translate(870px,270px);}
#cx5{transform:translate(870px,310px);}
#cx6{transform:translate(870px,350px);}
#cx7{transform:translate(870px,390px);}
.fig{position:absolute; z-index:5; width:900px; height:506px; filter:sepia(1); clip-path: circle(0% at 50% 50%); transition:all 2s linear 0s, filter 1s linear 1.5s;}
#cx1:focus ~ #fig1,#cx2:focus ~ #fig2,#cx3:focus ~ #fig3,#cx4:focus ~ #fig4,#cx5:focus ~ #fig5,#cx6:focus ~ #fig6,#cx7:focus ~ #fig7{width:900px; height:506px; filter:sepia(0); clip-path: circle(100% at 50% 50%);}
--></style>