• Montage 119

    La forme, la couleur et l'épaisseur de la bordure intérieure se règle par: outline:0.7vh double white.

    Sa distance par rapport au bord de l'image de règle par: outline-offset:-1vw;

    Si vous mettez une valeur positive à outline-offset, la bordure sera extérieure.

     

    Clic maintenu

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/x94s_lg5ZvQ3KxHykjnB2jdkfZU.jpg'); background-size: cover; outline:0.7vh double white; outline-offset: -1.2vw;">
    <p id="vigfd">&nbsp;</p>
    <p id="vig0">Clic maintenu</p>
    <p id="vig1" class="vig">&nbsp;</p>
    <p id="vig2" class="vig">&nbsp;</p>
    <p id="vig3" class="vig">&nbsp;</p>
    <p id="vig4" class="vig">&nbsp;</p>
    <p id="vig5" class="vig">&nbsp;</p>
    <p id="vig6" class="vig">&nbsp;</p>
    </div>
    <style><!--
    #vigfd{position:absolute; z-index:1; width:10vw; height:33.75vw; background:rgba(0,0,0,0.3); transform:translate(50vw,0vw);}
    #vig0{position:absolute; z-index:1; width:10vw; text-align:center; font-size:1.2vw; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(50vw,0vw);}
    #vg{position:absolute; z-index:5; width:10vw; height:33.75vw; text-align:center; background:rgba(0,0,0,0.5); transform:translate(50vw,0vw);}
    .vig{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black;transition:all 1s linear;}
    #vig1{outline:0.1vh solid white; outline-offset: -0.6vw; background:url('http://ekladata.com/T08F9HWs-8yzefC8Hkm2TDZpJiE.jpg'); background-size:cover; transform:translate(51vw,3vw);}
    #vig2{outline:0.1vh double white; outline-offset: -0.6vw; background:url('http://ekladata.com/n_OybFeGY15Bv854U5CLGB8S12w.jpg'); background-size:cover; transform:translate(51vw,8vw);}
    #vig3{outline:0.4vh ridge white; outline-offset: -0.6vw; background:url('http://ekladata.com/lSB63eQJYXU9caXMDkkkhoZK-6Y.jpg'); background-size:cover; transform:translate(51vw,13vw);}
    #vig4{outline:0.4vh inset white; outline-offset: -0.6vw; background:url('http://ekladata.com/m87wDN8r88oyiiN8hhiPKvkox5A.jpg'); background-size:cover; transform:translate(51vw,18vw);}
    #vig5{outline:0.4vh dashed white; outline-offset: -0.6vw; background:url('http://ekladata.com/94eLOewe1nEdLV4iw5g9CO-ivYU.jpg'); background-size:cover; transform:translate(51vw,23vw);}
    #vig6{outline:0.4vh dotted white; outline-offset: -0.6vw; background:url('http://ekladata.com/RvaTkuKSDs406pIIUuGuzV2XW7k.jpg'); background-size:cover; transform:translate(51vw,28vw);}

    #vig1:active{z-index:10; width:60vw; height:33.75vw; border:none; box-shadow:none; outline:0.5vh solid white; outline-offset: -1.2vw; transform:translate(0vw,0vw);}
    #vig2:active{z-index:10; width:60vw; height:33.75vw; border:none; box-shadow:none; outline:0.7vh double white; outline-offset: -1.2vw; transform:translate(0vw,0vw);}
    #vig3:active{z-index:10; width:60vw; height:33.75vw; border:none; box-shadow:none; outline:0.5vh ridge salmon; outline-offset: -1.2vw; transform:translate(0vw,0vw);}
    #vig4:active{z-index:10; width:60vw; height:33.75vw; border:none; box-shadow:none; outline:0.5vw inset lime; outline-offset: -1.2vw; transform:translate(0vw,0vw);}
    #vig5:active{z-index:10; width:60vw; height:33.75vw; border:none; box-shadow:none; outline:0.5vh dashed white; outline-offset: -1.2vw; transform:translate(0vw,0vw);}
    #vig6:active{z-index:10; width:60vw; height:33.75vw; border:none; box-shadow:none; outline:1vh dotted white; outline-offset: -1.2vw; transform:translate(0vw,0vw);}
    --></style>