Abîme 3

Une image en 1200x675px

 

 

 

 

 

 

 

 

 

---

<div style="width: 1200px; height: 675px; border-radius: 20px; box-shadow: 6px 6px 8px black; margin: 50px auto; text-align: left;">

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

<p id="mg1" class="mg">&nbsp;</p>

<p id="mg2" class="mg">&nbsp;</p>

<p id="mg3" class="mg">&nbsp;</p>

<p id="mg4" class="mg">&nbsp;</p>

<p id="mg5" class="mg">&nbsp;</p>

<p id="mg6" class="mg">&nbsp;</p>

<p id="mg7" class="mg">&nbsp;</p>

<p id="mg8" class="mg">&nbsp;</p>

</div>

<style><!--

#sv{position:absolute; z-index:10; width:1200px; height:675px;} 

.mg{position:absolute; border-radius:20px; border:2px solid black; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; background:url('http://ekladata.com/Mw-Z7YceP-ZvSwLppr7l7bFzT_s.jpg'); background-size:cover; transition:all 2s;}

#mg1{width:1200px; height:675px;  transform:translate(0px,0px);  filter:grayscale(1);}

#mg2{width:1000px; height:600px; transform:translate(0px,0px); filter:grayscale(0.9);}

#mg3{width:850px; height:500px; transform:translate(0px,0px); filter:grayscale(0.8);}

#mg4{width:700px; height:400px; transform:translate(0px,0px); filter:grayscale(0.7);}

#mg5{width:580px; height:300px; transform:translate(0px,0px); filter:grayscale(0.6);}

#mg6{width:470px; height:200px; transform:translate(0px,0px); filter:grayscale(0.4);}

#mg7{width:340px; height:120px; transform:translate(0px,0px); filter:grayscale(0.2);}

#mg8{width:200px; height:70px; transform:translate(0px,0px); filter:grayscale(0);}

#sv:hover ~ #mg1,#sv:hover ~ #mg2,#sv:hover ~ #mg3,#sv:hover ~ #mg4,#sv:hover ~ #mg5,#sv:hover ~ #mg6,#sv:hover ~ #mg7,#sv:hover ~ #mg8{width:1200px; height:675px;}

--></style>