Abîme 2

Une image en 1200x675px, 16/9.

 

 

 

 

 

 

---

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

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

<p id="vt1x" class="vtx">&nbsp;</p>

<p id="vt2x" class="vtx">&nbsp;</p>

<p id="vt3x" class="vtx">&nbsp;</p>

<p id="vt4x" class="vtx">&nbsp;</p>

<p id="vt5x" class="vtx">&nbsp;</p>

</div>

<style><!--

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

.vtx{position:absolute; width:1200px; height:675px; box-shadow:inset -6px -6px 8px white, inset 6px 6px 8px black; border-radius:50%; transform:translate(0px,0px); background:url('http://ekladata.com/k-UeIAW_BABETzkYqE2MXMs0TlE.jpg'); background-size:cover; transform-origin:bottom left; transition:all 1s;}

#vt1x{transform:scale(1); filter:grayscale(1); opacity:0.6;}

#vt2x{transform:scale(0.8); filter:grayscale(0.6); opacity:0.7;}

#vt3x{transform:scale(0.6); filter:grayscale(0.4); opacity:0.8}

#vt4x{transform:scale(0.4); filter:grayscale(0.2); opacity:0.9;}

#vt5x{transform:scale(0.2); filter:grayscale(0); opacity:1;}

#svx:hover ~ #vt1x,#svx:hover ~ #vt2x,#svx:hover ~ #vt3x,#svx:hover ~ #vt4x,#svx:hover ~ #vt5x{width:1200px; height:675px; border-radius:0%; transform:scale(1); filter:grayscale(0);}

--></style>