• Exemple 218

    8 images au ratio 16/9

    Clic maintenu

     

     

     

     

     

     

     

     

    <div style="position: relative; width: 1000px; height: 563px; margin: 5px auto; overflow: hidden;">
    <p id="cdr0">Clic maintenu</p>
    <p id="cdr1" class="cdr">&nbsp;</p>
    <p id="cdr2" class="cdr">&nbsp;</p>
    <p id="cdr3" class="cdr">&nbsp;</p>
    <p id="cdr4" class="cdr">&nbsp;</p>
    <p id="cdr5" class="cdr">&nbsp;</p>
    <p id="cdr6" class="cdr">&nbsp;</p>
    <p id="cdr7" class="cdr">&nbsp;</p>
    <p id="cdr8" class="cdr">&nbsp;</p>
    </div>

    <style><!--
    #cdr0{position:absolute; z-index:1; width:200px; transform:translate(350px,10px); font-size:30px;}
    .cdr{position:absolute; z-index:1; filter:grayscale(1); transition: height 1s linear 0.5s, margin 1s linear 0.5s, background 1s linear 0.5s, transform 1s linear 1.5s, width 1s linear 1.5s, filter 1s linear 2.5s;}
    #cdr1{box-sizing:border-box; width:300px; height:150px; border:6px ridge white; background:url('http://ekladata.com/OwgCb9o0nkPEHmOh2dJVcb1Qml4.jpg'); background-size:1000px 563px; background-position:0px -50px; transform:translate(0px,0px); margin:50px 0 0 0;}
    #cdr2{box-sizing:border-box; width:250px; height:250px; border:6px ridge white; background:url('http://ekladata.com/OwgCb9o0nkPEHmOh2dJVcb1Qml4.jpg'); background-size:1000px 563px; background-position:0px -150px; transform:translate(200px,0px); margin:150px 0 0 0;}
    #cdr3{box-sizing:border-box; width:50px; height:250px; border:6px ridge white; background:url('http://ekladata.com/ovERnfbCXx7KdKyjXtSwvlHHvVk.jpg'); background-size:1000px 563px; background-position:0px -300px; transform:translate(300px,0px); margin:300px 0 0 0;}
    #cdr4{box-sizing:border-box; width:350px; height:100px; border:6px ridge white; background:url('http://ekladata.com/w87wC3He6OOPP2aMoaPJMeFZzHQ.jpg'); background-size:1000px 563px; background-position:0px -100px; transform:translate(650px,0px); margin:100px 0 0 0;}
    #cdr5{box-sizing:border-box; width:350px; height:200px; border:6px ridge white; background:url('http://ekladata.com/xYPtdcpf70Gom3I4i_45G8g0aJE.jpg'); background-size:1000px 563px; background-position:0px -80px; transform:translate(400px,0px); margin:80px 0 0 0;}
    #cdr6{box-sizing:border-box; width:200px; height:350px; border:6px ridge white; background:url('http://ekladata.com/gKeHvf5f3sQbRnXQypOg235z7rA.jpg'); background-size:1000px 563px; background-position:0px -180px; transform:translate(50px,0px); margin:180px 0 0 0;}
    #cdr7{box-sizing:border-box; width:200px; height:250px; border:6px ridge white; background:url('http://ekladata.com/TCOxlKAbs5gGA1cWotYDyMVa0xQ.jpg'); background-size:1000px 563px; background-position:0px -230px; transform:translate(520px,0px); margin:230px 0 0 0;}
    #cdr8{box-sizing:border-box; width:250px; height:300px; border:6px ridge white; background:url('http://ekladata.com/dgrsUcsfcJoF5M3hrIvYaacuJZs.jpg'); background-size:1000px 563px; background-position:0px -250px; transform:translate(700px,0px); margin:250px 0 0 0;}
    #cdr1:active,#cdr2:active,#cdr3:active, #cdr4:active,#cdr5:active,#cdr6:active,#cdr7:active,#cdr8:active{z-index:5; width:1000px; height:563px; filter:grayscale(0); transform:translate(0px,0px); margin:0px 0 0 0;background-position:0px 0px;}
    --></style>