• Vertical

    “L'avantage des médecins, c'est que lorsqu'ils commettent une erreur, ils l'enterrent tout de suite...” Alphonse Allais.

    Je ne prends pas beaucoup de photos en vertical, car il est moins facile de les publier; lorsqu'il y en a plusieurs, on peut faire un montage.

    Comme déjà proposé, l'image s'agrandit à partir de la partie affichée.

    Survol

     

     

     

     

     

     

     

     

     


    <p style="text-align: center;"><strong>Comme d&eacute;j&agrave; propos&eacute;, l'image s'agrandit &agrave; partir de la partie affich&eacute;e.</strong></p>
    <div style="width: 80vw; height: 45vw; margin: 2vh auto;">
    <p id="vt0">Survol</p>
    <p id="vt1" class="vt">&nbsp;</p>
    <p id="vt2" class="vt">&nbsp;</p>
    <p id="vt3" class="vt">&nbsp;</p>
    <p id="vt4" class="vt">&nbsp;</p>
    <p id="vt5" class="vt">&nbsp;</p>
    <p id="vt6" class="vt">&nbsp;</p>
    <p id="vt7" class="vt">&nbsp;</p>
    <p id="vt8" class="vt">&nbsp;</p>
    <p id="vt9" class="vt">&nbsp;</p>
    </div>
    <style><!--
    #vt0{position:absolute; z-index:1; width:10vw; background:rgba(0,0,0,0.5); text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(35vw,0vw);}
    .vt{position:absolute; z-index:1; border:0.4vh ridge white;transition:all 1s linear;}
    #vt1{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/3S57M6-35FQxTV4n3kLmXwgzRuU.jpg'); background-size:25.3vw 45vw; background-position:-5vw 0vw; transform:translate(5vw,0vw);}
    #vt2{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/dkBnl5dT9g-9lURQmrh-wYDowH8.jpg'); background-size:25.3vw 45vw; background-position:-7vw -3vw; transform:translate(12vw,3vw);}
    #vt3{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/wBT_rAUDc7ZwXOMBpyHZcKp7Zx8.jpg'); background-size:25.3vw 45vw; background-position:-7vw -6vw; transform:translate(19vw,6vw);}
    #vt4{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/fFEDEentkSWUrhg2JdGgr-PvNwk.jpg'); background-size:25.3vw 45vw; background-position:-7vw -9vw; transform:translate(26vw,9vw);}
    #vt5{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/u-Yrz558gMFQDYo_usY6m_efccg.jpg'); background-size:25.3vw 45vw; background-position:-7vw -12vw; transform:translate(33vw,12vw);}
    #vt6{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/OvHKzsY2AcK7v8ZJJTHqnoxVjQI.jpg'); background-size:25.3vw 45vw; background-position:-7vw -15vw; transform:translate(40vw,15vw);}
    #vt7{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/EDJ6EXqvy1KFC4rUk1bjgq5uZZA.jpg'); background-size:25.3vw 45vw; background-position:-7vw -18vw; transform:translate(47vw,18vw);}
    #vt8{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/9Exyf76afgSbQQGZBjhnDqEJzm8.jpg'); background-size:25.3vw 45vw; background-position:-7vw -21vw; transform:translate(54vw,21vw);}
    #vt9{box-sizing:border-box; width:5vw; height:15vw; background:url('http://ekladata.com/_zQZprrXt4soEuXVWE0jv5N5ZGw.jpg'); background-size:25.3vw 45vw; background-position:-7vw -24vw; transform:translate(61vw,24vw);}

    #vt1:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(0vw,0vw); background-position:0vw 0vw;}
    #vt2:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(5vw,0vw); background-position:0vw 0vw;}
    #vt3:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(12vw,0vw); background-position:0vw 0vw;}
    #vt4:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(19vw,0vw); background-position:0vw 0vw;}
    #vt5:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(26vw,0vw); background-position:0vw 0vw;}
    #vt6:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(33vw,0vw); background-position:0vw 0vw;}
    #vt7:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(40vw,0vw); background-position:0vw 0vw;}
    #vt8:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(47vw,0vw); background-position:0vw 0vw;}
    #vt9:hover{ z-index:5; width:25.3vw; height:45vw;transform:translate(54vw,0vw); background-position:0vw 0vw;}
    --></style>