Promenade

6 images + 1 en fond en 16/9

Survol de chaque cartouche.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

<div style="width:1200px; height:675px; margin:50px auto; text-align:left; background:url('http://ekladata.com/ip-tKaesizjxj6b30yP1GFAxH-8@1200x675.jpg'); background-size:cover;border:4px ridge grey;">

<p id="sv">Survol de chaque cartouche.</p>

<p id="cde1" class="cde">&nbsp;</p>

<p id="cart1" class="cart">&nbsp;</p>

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

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

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

<p id="cde2" class="cde">&nbsp;</p>

<p id="cart2" class="cart">&nbsp;</p>

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

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

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

<p id="cde3" class="cde">&nbsp;</p>

<p id="cart3" class="cart">&nbsp;</p>

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

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

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

<p id="cde4" class="cde">&nbsp;</p>

<p id="cart4" class="cart">&nbsp;</p>

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

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

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

<p id="cde5" class="cde">&nbsp;</p>

<p id="cart5" class="cart">&nbsp;</p>

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

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

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

<p id="cde6" class="cde">&nbsp;</p>

<p id="cart6" class="cart">&nbsp;</p>

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

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

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

</div>

<hr style="border:3px double black;"><br>...

<style><!--

#sv{position:absolute; z-index:1; width:400px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(400px,20px);}

.cde{position:absolute; z-index:10; width:320px; height:120px; border-radius:60px;}

.cart{position:absolute; z-index:1; width:320px; height:120px; border-radius:60px; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black;}

.mg{position:absolute; z-index:1; width:80px; height:80px; border-radius:50%; box-shadow:inset -4px -4px 6px white, inset 4px 4px 6px black; transition:all 2s;}

#cde1,#cart1{transform:translate(40px,45px);}

#mg1a{background:url('http://ekladata.com/1otn4KLYFkImk4_WcbxeB_dEzIc@1200x675.jpg'); background-size:1200px 675px; background-position:-60px -65px; transform:translate(60px,65px);}

#mg1b{background:url('http://ekladata.com/1otn4KLYFkImk4_WcbxeB_dEzIc@1200x675.jpg'); background-size:1200px 675px; background-position:-160px -65px; transform:translate(160px,65px);}

#mg1c{background:url('http://ekladata.com/1otn4KLYFkImk4_WcbxeB_dEzIc@1200x675.jpg'); background-size:1200px 675px; background-position:-260px -65px; transform:translate(260px,65px);}

#cde2,#cart2{transform:translate(840px,45px);}

#mg2a{background:url('http://ekladata.com/rklDLr-pttHY6eQ48EWgdRvHjrE@1200x675.jpg'); background-size:1200px 675px; background-position:-860px -65px; transform:translate(860px,65px);}

#mg2b{background:url('http://ekladata.com/rklDLr-pttHY6eQ48EWgdRvHjrE@1200x675.jpg'); background-size:1200px 675px; background-position:-960px -65px; transform:translate(960px,65px);}

#mg2c{background:url('http://ekladata.com/rklDLr-pttHY6eQ48EWgdRvHjrE@1200x675.jpg'); background-size:1200px 675px; background-position:-1060px -65px; transform:translate(1060px,65px);}

#cde3,#cart3{transform:translate(230px,275px);}

#mg3a{background:url('http://ekladata.com/nt29eM7_tk2N2PKeaPwZVKvLd8E@1200x675.jpg'); background-size:1200px 675px; background-position:-250px -295px; transform:translate(250px,295px);}

#mg3b{background:url('http://ekladata.com/nt29eM7_tk2N2PKeaPwZVKvLd8E@1200x675.jpg'); background-size:1200px 675px; background-position:-350px -295px; transform:translate(350px,295px);}

#mg3c{background:url('http://ekladata.com/nt29eM7_tk2N2PKeaPwZVKvLd8E@1200x675.jpg'); background-size:1200px 675px; background-position:-450px -295px; transform:translate(450px,295px);}

#cde4,#cart4{transform:translate(650px,275px);}

#mg4a{background:url('http://ekladata.com/osQtrov6lzt7QoYck-YS3w1Dm9U@1200x675.jpg'); background-size:1200px 675px; background-position:-670px -295px; transform:translate(670px,295px);}

#mg4b{background:url('http://ekladata.com/osQtrov6lzt7QoYck-YS3w1Dm9U@1200x675.jpg'); background-size:1200px 675px; background-position:-770px -295px; transform:translate(770px,295px);}

#mg4c{background:url('http://ekladata.com/osQtrov6lzt7QoYck-YS3w1Dm9U@1200x675.jpg'); background-size:1200px 675px; background-position:-870px -295px; transform:translate(870px,295px);}

#cde5,#cart5{transform:translate(40px,510px);}

#mg5a{background:url('http://ekladata.com/sprxtGyr-J5nM1bnXW41KNkFKkA@1200x675.jpg'); background-size:1200px 675px; background-position:-60px -530px; transform:translate(60px,530px);}

#mg5b{background:url('http://ekladata.com/sprxtGyr-J5nM1bnXW41KNkFKkA@1200x675.jpg'); background-size:1200px 675px; background-position:-160px -530px; transform:translate(160px,530px);}

#mg5c{background:url('http://ekladata.com/sprxtGyr-J5nM1bnXW41KNkFKkA@1200x675.jpg'); background-size:1200px 675px; background-position:-260px -530px; transform:translate(260px,530px);}

#cde6,#cart6{transform:translate(840px,510px);}

#mg6a{background:url('http://ekladata.com/niy__XwfrGRGALrtvKpQ-GMgNFY@1200x675.jpg'); background-size:1200px 675px; background-position:-860px -530px; transform:translate(860px,530px);}

#mg6b{background:url('http://ekladata.com/niy__XwfrGRGALrtvKpQ-GMgNFY@1200x675.jpg'); background-size:1200px 675px; background-position:-960px -530px; transform:translate(960px,530px);}

#mg6c{background:url('http://ekladata.com/niy__XwfrGRGALrtvKpQ-GMgNFY@1200x675.jpg'); background-size:1200px 675px; background-position:-1060px -530px; transform:translate(1060px,530px);}

#cde1:hover ~ #mg1a,#cde2:hover ~ #mg2a,#cde3:hover ~ #mg3a,#cde4:hover ~ #mg4a,#cde5:hover ~ #mg5a,#cde6:hover ~ #mg6a{z-index:5; width:400px; height:675px; border-radius:0%; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px);margin-top:0px;}

#cde1:hover ~ #mg1b,#cde2:hover ~ #mg2b,#cde3:hover ~ #mg3b,#cde4:hover ~ #mg4b,#cde5:hover ~ #mg5b,#cde6:hover ~ #mg6b{z-index:5; width:400px; height:675px; border-radius:0%; box-shadow:none;  background-position:-400px 0px; transform:translate(400px,0px);margin-top:0px;}

#cde1:hover ~ #mg1c,#cde2:hover ~ #mg2c,#cde3:hover ~ #mg3c,#cde4:hover ~ #mg4c,#cde5:hover ~ #mg5c,#cde6:hover ~ #mg6c{z-index:5; width:400px; height:675px; border-radius:0%; box-shadow:none;  background-position:-800px 0px; transform:translate(800px,0px);margin-top:0px;}

--></style>