• Exemple 174

    Même présentation que la page précédente mais chaque vignette affiche la partie de l'image correspondant (background-position) à sa position dans le montage (transform:translate();).

    Mêmes images pour comparer: A vous de choisir !

    Survol

     

     

     

     

     

     

     

     

    <div style="width:1000px; height:562px; margin:5px auto;">
    <p id="vca0">Survol</p>
    <p id="vca1" class="vca">&nbsp;</p>
    <p id="vca2" class="vca">&nbsp;</p>
    <p id="vca3" class="vca">&nbsp;</p>
    <p id="vca4" class="vca">&nbsp;</p>
    <p id="vca5" class="vca">&nbsp;</p>
    <p id="vca6" class="vca">&nbsp;</p>
    <p id="vca7" class="vca">&nbsp;</p>
    <p id="vca8" class="vca">&nbsp;</p>
    </div>

    <style><!--
    #vca0{position:absolute; z-index:1; width:100px; font-size:30px; color:coral; text-shadow:1px 1px black; transform:translate(450px,260px);}
    .vca{position:absolute; z-index:1; width:320px; height:180px; border:6px ridge white; transition:all 1s linear;}
    #vca1{box-sizing:border-box; background:url('http://ekladata.com/p44EWYrbP6aFu-gIJm4nUNimE80.jpg'); background-size:1000px 562px; background-position:0px 0px; transform:translate(0px,0px);}
    #vca2{box-sizing:border-box; background:url('http://ekladata.com/2ZRvWF4dO0SR-RcPcpfH29ZxPjI.jpg'); background-size:1000px 562px; background-position:-340px 0px; transform:translate(340px,0px);}
    #vca3{box-sizing:border-box; background:url('http://ekladata.com/-CICoijq6wjahI-v-1AviKpMx0w.jpg'); background-size:1000px 562px; background-position:-680px 0px; transform:translate(680px,0px);}
    #vca4{box-sizing:border-box; background:url('http://ekladata.com/sEsD2BTkgvWZvooXyl30iJOCfuM.jpg'); background-size:1000px 562px; background-position:-680px -190px; transform:translate(680px,190px);}
    #vca5{box-sizing:border-box; background:url('http://ekladata.com/BwHCO8jPFCelT8x_wyJUVsgc030.jpg'); background-size:1000px 562px; background-position:-680px -380px; transform:translate(680px,380px);}
    #vca6{box-sizing:border-box; background:url('http://ekladata.com/5y6Pt3Lw-BF7pgGYbfFNBmm99-M.jpg'); background-size:1000px 562px; background-position:-340px -380px; transform:translate(340px,380px);}
    #vca7{box-sizing:border-box; background:url('http://ekladata.com/2dHKx859D6vFwNPpGJ-paVhOYhw.jpg'); background-size:1000px 562px; background-position:0px -380px; transform:translate(0px,380px);}
    #vca8{box-sizing:border-box; background:url('http://ekladata.com/PecBoBkYRL8sV4gRpK931Kw7JEs.jpg'); background-size:1000px 562px; background-position:0px -190px; transform:translate(0px,190px);}
    #vca1:hover,#vca2:hover,#vca3:hover,#vca4:hover,#vca5:hover,#vca6:hover,#vca7:hover,#vca8:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>