• Art.07B.5.21

    Montage exemple en 80vw par 45vw; code en 1000px par 562px; 6 images au ratio 16/9.

    Survol

     

     

     

     

     


    <div style="width: 1000px; height: 562px; border: 1px solid black; margin: 20px auto; background: url('http://ekladata.com/lfbnb81ab5S59tMRb25ekTLBdOI.jpg'); background-size: cover; text-align: left;">
    <p id="jar0">Survol</p>
    <p id="jar1" class="jar">&nbsp;</p>
    <p id="jar2" class="jar">&nbsp;</p>
    <p id="jar3" class="jar">&nbsp;</p>
    <p id="jar4" class="jar">&nbsp;</p>
    <p id="jar5" class="jar">&nbsp;</p>
    </div>
    <style><!--
    #jar0{position:absolute; z-index:1: width:120px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(20px,20px);}
    .jar{position:absolute; z-index:1; width:150px; height:50px; border-radius:2.5vw; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; transition:all 1s;}
    #jar1{background:url('http://ekladata.com/X7DoWCgU7Eh_RiLXFF22XAbfHU8.jpg'); background-size:1000px 562px; background-position:-150px -80px; transform:translate(150px,80px);}
    #jar2{background:url('http://ekladata.com/RPt4yduyFSV5_EtaktGO3mcQPXo.jpg'); background-size:1000px 562px; background-position:-120px -160px; transform:translate(120px,160px);}
    #jar3{background:url('http://ekladata.com/2dAUW15Oh-e1_KPrqpDFynJsmt8.jpg'); background-size:1000px 562px; background-position:-90px -240px; transform:translate(90px,240px);}
    #jar4{background:url('http://ekladata.com/vZdDrs6Ks9mUjl-5f9ih_piYVGw.jpg'); background-size:1000px 562px; background-position:-120px -320px; transform:translate(120px,320px);}
    #jar5{background:url('http://ekladata.com/_H92zZiPWuPqSRT93iyXo7wgXDI.jpg'); background-size:1000px 562px; background-position:-150px -400px; transform:translate(150px,400px);}
    #jar1:hover,#jar2:hover,#jar3:hover,#jar4:hover,#jar5:hover{z-index:5; width:1000px; height:562px; border-radius:0px; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>