Abîme 1

Deux images en 380px par 675px (16/9).

SURVOL

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;">

<p id="inf">SURVOL</p>

<p id="sva">&nbsp;</p>

<p id="vt1" class="vt">&nbsp;</p>

<p id="vt2" class="vt">&nbsp;</p>

<p id="vt3" class="vt">&nbsp;</p>

<p id="vt4" class="vt">&nbsp;</p>

<p id="vt5" class="vt">&nbsp;</p>

<p id="svb">&nbsp;</p>

<p id="vt1b" class="vtb">&nbsp;</p>

<p id="vt2b" class="vtb">&nbsp;</p>

<p id="vt3b" class="vtb">&nbsp;</p>

<p id="vt4b" class="vtb">&nbsp;</p>

<p id="vt5b" class="vtb">&nbsp;</p>

<p id="svc">&nbsp;</p>

<p id="vt1c" class="vtc">&nbsp;</p>

<p id="vt2c" class="vtc">&nbsp;</p>

<p id="vt3c" class="vtc">&nbsp;</p>

<p id="vt4c" class="vtc">&nbsp;</p>

<p id="vt5c" class="vtc">&nbsp;</p>

</div>

<style><!--

#inf{position:absolute; z-index:1; width:120px; text-align:center; font-size:25px; transform:translate(340px,10px);} 

#sva{position:absolute; z-index:10; width:380px; height:675px; transform:translate(0px,0px);} 

.vt{position:absolute; z-index:2;width:380px; height:675px;  border-radius:50%; transform:translate(0px,0px); background:url('http://ekladata.com/X94l42_QWS9ie1MGpGfMBAs9qcM.jpg'); background-size:cover; transition:all 1s;}

#vt1{transform:scale(1); filter:grayscale(1);}

#vt2{transform:scale(0.8); filter:grayscale(0.9);}

#vt3{transform:scale(0.6); filter:grayscale(0.8);}

#vt4{transform:scale(0.4); filter:grayscale(0.7);}

#vt5{transform:scale(0.2); filter:grayscale(0.6);}

#sva:hover ~ #vt1,#sva:hover ~ #vt2,#sva:hover ~ #vt3,#sva:hover ~ #vt4,#sva:hover ~ #vt5{width:380px; height:675px; border-radius:0%;transform:scale(1); filter:grayscale(0);}

#svb{position:absolute; z-index:10; width:380px; height:675px; transform:translate(410px,0px);} 

.vtb{position:absolute;  z-index:2; width:380px; height:675px;  border-radius:50%; transform:translate(410px,0px); background:url('http://ekladata.com/M5kYz9TsOCEhxPhERjPnr5mekeQ.jpg'); background-size:cover; transition:all 1s;}

#vt1b{transform:translate(410px,0px) scale(1); filter:grayscale(1);}

#vt2b{transform:translate(410px,0px) scale(0.8); filter:grayscale(0.9);}

#vt3b{transform:translate(410px,0px) scale(0.6); filter:grayscale(0.8);}

#vt4b{transform:translate(410px,0px) scale(0.4); filter:grayscale(0.7);}

#vt5b{transform:translate(410px,0px) scale(0.2); filter:grayscale(0.6);}

#svb:hover ~ #vt1b,#svb:hover ~ #vt2b,#svb:hover ~ #vt3b,#svb:hover ~ #vt4b,#svb:hover ~ #vt5b{width:380px; height:675px; border-radius:0%;transform:translate(410px,0px) scale(1); filter:grayscale(0);}

#svc{position:absolute; z-index:10; width:380px; height:675px; transform:translate(820px,0px);} 

.vtc{position:absolute;  z-index:2; width:380px; height:675px;  border-radius:50%; transform:translate(820px,0px); background:url('http://ekladata.com/qyox8WFJz_4uRh9_l26G64A6U18.jpg'); background-size:cover; transition:all 1s;}

#vt1c{transform:translate(820px,0px) scale(1); filter:grayscale(1);}

#vt2c{transform:translate(820px,0px) scale(0.8); filter:grayscale(0.9);}

#vt3c{transform:translate(820px,0px) scale(0.6); filter:grayscale(0.8);}

#vt4c{transform:translate(820px,0px) scale(0.4); filter:grayscale(0.7);}

#vt5c{transform:translate(820px,0px) scale(0.2); filter:grayscale(0.6);}

#svc:hover ~ #vt1c,#svc:hover ~ #vt2c,#svc:hover ~ #vt3c,#svc:hover ~ #vt4c,#svc:hover ~ #vt5c{width:380px; height:675px; border-radius:0%;transform:translate(820px,0px) scale(1); filter:grayscale(0);}

--></style>