• Exemple 184

    1+8 images au ratio 16/9. 

     

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 1vh auto; border: 1px solid black; background: url('http://ekladata.com/CGNZxT-BfpokUjbqOUa3t52gGqo.jpg'); background-size: cover;">

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

    <p id="bd1">Survol</p>

    <p id="din1" class="din">&nbsp;</p>

    <p id="din2" class="din">&nbsp;</p>

    <p id="din3" class="din">&nbsp;</p>

    <p id="din4" class="din">&nbsp;</p>

    <p id="din5" class="din">&nbsp;</p>

    <p id="din6" class="din">&nbsp;</p>

    <p id="din7" class="din">&nbsp;</p>

    <p id="din8" class="din">&nbsp;</p>

    </div>

    <style><!--

    #bd{position:absolute; z-index:1; width:30px; height:562px; background:rgba(255,255,255,0.8); transform:translate(970px,0px);}

    #bd1{position:absolute; z-index:1; width:1vw; height:10vw; font-size:25px; color:black; text-shadow:1px 1px width; white-space:normal; transform:translate(975px,340px);}

    .din{position:absolute; z-index:1; width:1000px; height:562px;   transition:all 1s linear;}

    #din1{background:url('http://ekladata.com/1zmicSCUoLMr7hdO_9SOKEU_pLM.jpg'); background-size:1000px 562px; clip-path:polygon(975px 5px, 995px 5px, 995px 25px, 975px 25px);}

    #din2{background:url('http://ekladata.com/tqvwD7c-GnuLXHgFunaJgNvMhXQ.jpg'); background-size:1000px 562px; clip-path:polygon(975px 35px, 995px 35px, 995px 55px, 975px 55px);}

    #din3{background:url('http://ekladata.com/zoNXbtA3zIFJ5CHjYpRHUyZfmfg.jpg'); background-size:1000px 562px; clip-path:polygon(975px 65px, 995px 65px, 995px 85px, 975px 85px);}

    #din4{background:url('http://ekladata.com/9MZMw8np3ev5PItUpTiF00piNPA.jpg'); background-size:1000px 562px; clip-path:polygon(975px 95px, 995px 95px, 995px 115px, 975px 115px);}

    #din5{background:url('http://ekladata.com/z9LcukYwPTtJb7uYdhALXh0iAco.jpg'); background-size:1000px 562px; clip-path:polygon(975px 125px, 995px 125px, 995px 145px, 975px 145px);}

    #din6{background:url('http://ekladata.com/M_MLWzCW4zV8pzfYW-Co2UnAghI.jpg'); background-size:1000px 562px; clip-path:polygon(975px 155px, 995px 155px, 995px 175px, 975px 175px);}

    #din7{background:url('http://ekladata.com/z5Cl3z4cfqjKtLFy7t5fC44_RXU.jpg'); background-size:1000px 562px; clip-path:polygon(975px 185px, 995px 185px, 995px 205px, 975px 205px);}

    #din8{background:url('http://ekladata.com/OB8mx3vZYKxD7l0x9FLAU04WakE.jpg'); background-size:1000px 562px; clip-path:polygon(975px 210px, 995px 210px, 995px 230px, 975px 230px);}

    #din1:hover,#din2:hover,#din3:hover,#din4:hover,#din5:hover,#din6:hover,#din7:hover,#din8:hover{z-index:5; clip-path:polygon(0px 0px,1000px 0px, 1000px 562px, 0px 562px);}

    --></style>