• Exemple 228

    1+8 images au ratio 16/9. 

    Survol

     

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto; border: 1px solid black; background: url('http://ekladata.com/Dd-JcZ51s6wZGIx6fIQ_9tgfwyU.jpg'); background-size: 1000px 563px;">
    <p id="chd0">Survol</p>
    <p id="chd1" class="chd">&nbsp;</p>
    <p id="chd2" class="chd">&nbsp;</p>
    <p id="chd3" class="chd">&nbsp;</p>
    <p id="chd4" class="chd">&nbsp;</p>
    <p id="chd5" class="chd">&nbsp;</p>
    <p id="chd6" class="chd">&nbsp;</p>
    <p id="chd7" class="chd">&nbsp;</p>
    <p id="chd8" class="chd">&nbsp;</p>
    </div>

    <style><!--
    #chd0{position:absolute; z-index:1; width:150px; font-size:30px; color:white; text-shadow:2px 2px black;transform:translate(10px,10px);}
    .chd{position:absolute; z-index:1; width:100px; height:80px; border:4px solid white; box-shadow:4px 4px 6px black; transition:all 1s linear; }
    #chd1{background:url('http://ekladata.com/VEuwh0hMb4-1vSpCbhvTy_tvmxw.jpg'); background-position:-50px -100px; background-size:1000px 563px; transform:translate(100px,100px) skewx(45deg);}
    #chd2{background:url('http://ekladata.com/x3RCfvkvKqIwgCMvFoCERNU6cD0.jpg'); background-position:-50px -200px; background-size:1000px 563px; transform:translate(100px,200px) skewx(45deg);}
    #chd3{background:url('http://ekladata.com/Q9-IQOjoF0zFb1DTrFfiM7CsDwQ.jpg'); background-position:-50px -300px; background-size:1000px 563px; transform:translate(100px,300px) skewx(45deg);}
    #chd4{background:url('http://ekladata.com/q7mRt7yAIrd2LK2emHmTJaFnT1w.jpg'); background-position:-50px -400px; background-size:1000px 563px; transform:translate(100px,400px) skewx(45deg);}
    #chd5{background:url('http://ekladata.com/F8UpQhbfsTqnsh2Uy9y2gW76d9M.jpg'); background-position:-800px -100px; background-size:1000px 563px; transform:translate(800px,100px) skewx(45deg);}
    #chd6{background:url('http://ekladata.com/4iANqE7NAun1c_vjJ8aIXVH6Npo.jpg'); background-position:-800px -200px; background-size:1000px 563px; transform:translate(800px,200px) skewx(45deg);}
    #chd7{background:url('http://ekladata.com/RBlbolC1Q27LO93_1K7BgEoUQ_k.jpg'); background-position:-800px -300px; background-size:1000px 563px; transform:translate(800px,300px) skewx(45deg);}
    #chd8{background:url('http://ekladata.com/QOooPvLx4Zf7sHBz3fpH_iIvdZI.jpg'); background-position:-800px -400px; background-size:1000px 563px; transform:translate(800px,400px) skewx(45deg);}
    #chd1:hover,#chd2:hover,#chd3:hover,#chd4:hover,#chd5:hover,#chd6:hover,#chd7:hover,#chd8:hover{z-index:5; width:1000px; height:563px; border:none; background-position:0px 0px; transform:translate(0px,0px) skewx(0deg);}
    --></style>