Horizontal

7 images + 1 de fond en 16/9

Survol parties colorées.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left; border: 6px ridge white; box-shadow: 6px 6px 8px black;"><img id="fd" src="http://ekladata.com/1BoUajT0TnGb5YDfxAk1SOYqM7I.jpg" alt="" />

<p id="sv">Survol parties color&eacute;es.</p>

<p id="cd1a" class="cd">&nbsp;</p>

<p id="cd1b" class="cd">&nbsp;</p>

<p id="cd2a" class="cd">&nbsp;</p>

<p id="cd2b" class="cd">&nbsp;</p>

<p id="cd3a" class="cd">&nbsp;</p>

<p id="cd3b" class="cd">&nbsp;</p>

<p id="cd4a" class="cd">&nbsp;</p>

<p id="cd4b" class="cd">&nbsp;</p>

<p id="cd5a" class="cd">&nbsp;</p>

<p id="cd5b" class="cd">&nbsp;</p>

<p id="cd6a" class="cd">&nbsp;</p>

<p id="cd6b" class="cd">&nbsp;</p>

<p id="cd7a" class="cd">&nbsp;</p>

<p id="cd7b" class="cd">&nbsp;</p>

</div>

<style><!--

#fd{position:absolute; z-index:1; width:1200px; height:675px; filter:grayscale(0.5); opacity:0.6;}

#sv{position:absolute; z-index:1; width:150px; height:auto; text-align:center; font-size:25px; color:white; text-shadow:2px 2px black;transform:translate(525px,280px);}

.cd{position:absolute; z-index:1; margin-top:0px; transition:all 1s;}

#cd1a{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/dDW26GP5PCsul1Jzxej8VhQaYMo.jpg'); background-size:1200px 675px; background-position:-220px -35px;transform:translate(220px,35px) skewx(-20deg);}

#cd1b{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/dDW26GP5PCsul1Jzxej8VhQaYMo.jpg'); background-size:1200px 675px; background-position:-220px -565px; transform:translate(220px,565px) skewx(20deg); filter:grayscale(1);}

#cd2a{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/Eu3Z0Wk736-oGHH6wrAlhbp3qXo.jpg'); background-size:1200px 675px; background-position:-120px -135px; transform:translate(120px,135px) skewx(-20deg);}

#cd2b{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/Eu3Z0Wk736-oGHH6wrAlhbp3qXo.jpg'); background-size:1200px 675px; background-position:-120px -465px; transform:translate(120px,465px) skewx(20deg); filter:grayscale(1);}

#cd3a{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/Yhz6aRNVam8n0dIW8FHEjSnkYlk.jpg'); background-size:1200px 675px; background-position:-20px -235px; transform:translate(20px,235px) skewx(-20deg);}

#cd3b{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/Yhz6aRNVam8n0dIW8FHEjSnkYlk.jpg'); background-size:1200px 675px; background-position:-20px -365px; transform:translate(20px,365px) skewx(20deg); filter:grayscale(1);}

#cd4a{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/-gicSBWW2dnAUE_baZbgj3WdH6U.jpg'); background-size:1200px 675px; background-position:-720px -35px; transform:translate(720px,35px) skewx(20deg);}

#cd4b{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/-gicSBWW2dnAUE_baZbgj3WdH6U.jpg'); background-size:1200px 675px; background-position:-920px -365px; transform:translate(920px,365px) skewx(-20deg); filter:grayscale(1);}

#cd5a{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/dbhBgeA8BCwrNp2AtES91LhSeMY.jpg'); background-size:1200px 675px; background-position:-820px -135px; transform:translate(820px,135px) skewx(20deg);}

#cd5b{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/dbhBgeA8BCwrNp2AtES91LhSeMY.jpg'); background-size:1200px 675px; background-position:-820px -465px; transform:translate(820px,465px) skewx(-20deg); filter:grayscale(1);}

#cd6a{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/o6V5vabrtS659e_kgp-lWld9TAY.jpg'); background-size:1200px 675px; background-position:-920px -235px; transform:translate(920px,235px) skewx(20deg);}

#cd6b{width:200px; height:80px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/o6V5vabrtS659e_kgp-lWld9TAY.jpg'); background-size:1200px 675px; background-position:-720px -565px; transform:translate(720px,565px) skewx(-20deg); filter:grayscale(1);}

#cd7a{width:250px; height:180px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/8jgyTUfgjP_urKQgtMrtpaIZfY0.jpg'); background-size:1200px 675px; background-position:-450px -35px; transform:translate(450px,35px) perspective(200px) rotatex(20deg);}

#cd7b{width:250px; height:180px; border:4px ridge white; box-shadow:4px 4px 6px black; background:url('http://ekladata.com/8jgyTUfgjP_urKQgtMrtpaIZfY0.jpg'); background-size:1200px 675px; background-position:-450px -470px; transform:translate(450px,470px) perspective(200px) rotatex(-20deg); filter:grayscale(1);}

#cd1a:hover,#cd2a:hover,#cd3a:hover,#cd4a:hover,#cd5a:hover,#cd6a:hover{z-index:10; width:1200px; height:335px; border:none; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px);}

#cd1a:hover ~ #cd1b,#cd2a:hover ~ #cd2b,#cd3a:hover ~ #cd3b,#cd4a:hover ~ #cd4b,#cd5a:hover ~ #cd5b,#cd6a:hover ~ #cd6b{z-index:10; width:1200px; height:340px; border:none; box-shadow:none; background-position:0px -340px; transform:translate(0px,335px);filter:grayscale(0);}

#cd7a:hover{z-index:10; width:1200px; height:335px; border:none; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px) perspective(2000px) rotate(0deg);}

#cd7a:hover ~ #cd7b{z-index:10; width:1200px; height:335px; border:none; box-shadow:none; background-position:0px -335px; transform:translate(0px,335px) perspective(2000px) rotate(0deg); filter:grayscale(0);}

--></style>