• Exemple 219

    6 images au ratio 16/9. 

    Survol

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; border: 1px solid black; margin: 5px auto; background: linear-gradient(45deg, rgba(255,242,143,1) 0%, #A3FFFC 100%);">
    <p id="fdr0">Survol</p>
    <p id="fdr1" class="fdr">&nbsp;</p>
    <p id="fdr2" class="fdr">&nbsp;</p>
    <p id="fdr3" class="fdr">&nbsp;</p>
    <p id="fdr4" class="fdr">&nbsp;</p>
    <p id="fdr5" class="fdr">&nbsp;</p>
    <p id="fdr6" class="fdr">&nbsp;</p>
    </div>

    <style><!--
    #fdr0{position:absolute; z-index:1; width:120px; font-size:30px; transform:translate(100px,20px);}
    .fdr{position:absolute; z-index:1; border:6px ridge white; box-shadow:6px 6px 8px black; opacity:0.7; filter:grayscale(1); transition:all 1s linear 0.5s, opacity 0s linear 0s, filter 1s linear 1.5s;}
    #fdr1{box-sizing:border-box; width:200px; height:200px; transform:translate(100px,100px); background:url('http://ekladata.com/jK0SGovSilS2aWWLXkEh3HA_Vh8.jpg'); background-size:1000px 563px; background-position:-100px -100px;}
    #fdr2{box-sizing:border-box; width:200px; height:100px; transform:translate(350px,50px); background:url('http://ekladata.com/uCkB57JZVZrHyFZgQzOmRfzSZng.jpg'); background-size:1000px 563px; background-position:-350px -50px;}
    #fdr3{box-sizing:border-box; width:300px; height:150px; transform:translate(600px,80px); background:url('http://ekladata.com/8-WbBhtP7WF7UDKaG5SwJ6xfm2w.jpg'); background-size:1000px 563px; background-position:-600px -80px;}
    #fdr4{box-sizing:border-box; width:150px; height:300px; transform:translate(400px,200px); background:url('http://ekladata.com/fxPtgFhGcRCYcsJnZjl_HTTDubQ.jpg'); background-size:1000px 563px; background-position:-400px -200px;}
    #fdr5{box-sizing:border-box; width:100px; height:150px; transform:translate(150px,350px); background:url('http://ekladata.com/9LgBuW0IqbilrxdvOoEdNJhcPgU.jpg'); background-size:1000px 563px; background-position:-150px -350px;}
    #fdr6{box-sizing:border-box; width:200px; height:200px; transform:translate(650px,250px); background:url('http://ekladata.com/HqdA938hZL20CEDu94F6NGiL7YY.jpg'); background-size:1000px 563px; background-position:-650px -250px;}
    #fdr1:hover,#fdr2:hover,#fdr3:hover,#fdr4:hover,#fdr5:hover,#fdr6:hover{z-index:5; opacity:1; width:1000px; height:563px; filter:grayscale(0); transform:translate(0px,0px); background-position:0px 0px;}
    --></style>