• Exemple 192

    Un comparatif entre une vignette qui affiche la totalité de l'image en miniature (celles de gauche) et une vignette qui affiche la partie de l'image selon sa position dans le montage (celles de droite).

    Dans le premier cas, l'image s'agrandit en totalité et, dans le second, elle s'agrandit à partir de la partie de la vignette.

     

     

     

     

     

     

    <div style="width: 1000px; height: 562px; border: 1px solid black; margin: 5px auto; background: url('http://ekladata.com/S7o8_6Ko0nGBp_BiXUIV7a7-Umo.jpg'); background-size: cover; text-align: left;">
    <p id="cov1" class="cov">&nbsp;</p>
    <p id="cov2" class="cov">&nbsp;</p>
    <p id="cov3" class="cov">&nbsp;</p>
    <p id="cov4" class="cov">&nbsp;</p>
    <p id="cov5" class="cov">&nbsp;</p>
    <p id="cov6" class="cov">&nbsp;</p>
    </div>

    <style><!--
    .cov{position:absolute; z-index:1; width:160px; height:90px; border:6px ridge white; box-shadow:-4px -4px 6xp black; transition:all 1s linear;}
    #cov1{box-sizing:border-box; background:url('http://ekladata.com/ltpvwqi0qwxsBH5i6JuHJDH7wRA.jpg'); background-size:cover; transform:translate(10px,60px);}
    #cov2{box-sizing:border-box; background:url('http://ekladata.com/oO_VYzHJ9h1fnm8xBZ_xdF8yNWA.jpg'); background-size:cover; transform:translate(10px,210px);}
    #cov3{box-sizing:border-box; background:url('http://ekladata.com/vtNc5D7ZsCiBepOLC6iHW5zVuCQ.jpg'); background-size:cover; transform:translate(10px,360px);}
    #cov4{box-sizing:border-box; background:url('http://ekladata.com/wEIKUqigOVk5Eww9-Xh5CvJ_wIo.jpg'); background-size:1000px 562px; background-position:-830px -60px; transform:translate(830px,60px);}
    #cov5{box-sizing:border-box; background:url('http://ekladata.com/_FUoM9vBtfX58E05eiwRhsL29ok.jpg'); background-size:1000px 562px; background-position:-830px -210px; transform:translate(830px,210px);}
    #cov6{box-sizing:border-box; background:url('http://ekladata.com/5bUzgReBncgw8ZY4wxo0uBoU9i8.jpg'); background-size:1000px 562px; background-position:-830px -360px; transform:translate(830px,360px);}
    #cov1:hover,#cov2:hover,#cov3:hover,#cov4:hover,#cov5:hover,#cov6:hover{z-index:5; width:1000px; height:562px;background-position:0px 0px; transform:translate(0px,0px);}
    --></style>