• Exemple 225

    5 images au ratio 16/9

     

    Survol

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto;">
    <p id="mtg0">Survol</p>
    <p id="mtg1">&nbsp;</p>
    <p id="mtg2">&nbsp;</p>
    <p id="mtg3">&nbsp;</p>
    <p id="mtg4">&nbsp;</p>
    </div>

    <style><!--
    #mtg0{position:absolute; z-index:1; width:150px; font-size:40px; color:white; text-shadow:2px 2px black; transform:translate(700px,160px);}
    #mtg1{position:absolute; z-index:2; box-sizing:border-box; width:563px; height:563px; border:4px ridge white; border-radius:0 50% 50% 0; background:url('http://ekladata.com/nwt2H6eTO6fBNU94nHx13QufdoY.jpg'); background-size:1000px 563px; transition:all 1s linear;}
    #mtg2{position:absolute; z-index:1; box-sizing:border-box; width:600px; height:100px; border:4px ridge white; background:url('http://ekladata.com/xFSKa-_FhfHWAzmwclFrEDmudmo.jpg'); background-size:1000px 563px; background-position:-350px -50px; transform:translate(350px,50px); transition:all 1s linear;}
    #mtg3{position:absolute; z-index:1; box-sizing:border-box; width:600px; height:100px; border:4px ridge white; background:url('http://ekladata.com/nBNGUevyTeiawzTm6evc1NbQdls.jpg'); background-size:1000px 563px; background-position:-350px -231px; transform:translate(350px,231px); transition:all 1s linear;}
    #mtg4{position:absolute; z-index:1; box-sizing:border-box; width:600px; height:100px; border:4px ridge white; background:url('http://ekladata.com/fMvVP_Sz6RJrfrD6jKhh-oUvOCg.jpg'); background-size:1000px 563px; background-position:-350px -410px; transform:translate(350px,410px); transition:all 1s linear;}
    #mtg1:hover,#mtg2:hover,#mtg3:hover,#mtg4:hover{z-index:5; width:1000px; height:563px; border-radius:0px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>