• Variante hz 60vw/33.75vw

    Largeur du montage en 60% de la largeur de l'écran de lecture.

    Survol

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; background:url('http:/:...jpg'); background-size:cover;">
    <p id="ab0">Survol</p>
    <p id="ab1" class="ab">&nbsp;</p>
    <p id="ab2" class="ab">&nbsp;</p>
    <p id="ab3" class="ab">&nbsp;</p>
    <p id="ab4" class="ab">&nbsp;</p>
    <p id="ab5" class="ab">&nbsp;</p>
    <p id="ab6" class="ab">&nbsp;</p>
    <p id="ab7" class="ab">&nbsp;</p>
    <p id="ab8" class="ab">&nbsp;</p>
    <p id="ab9" class="ab">&nbsp;</p>
    <p id="ab10" class="ab">&nbsp;</p>
    <p id="ab11" class="ab">&nbsp;</p>
    <p id="ab12" class="ab">&nbsp;</p>
    </div>

    <style><!--
    #ab0{position:absolute; z-index:1; width:10vw; text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(25vw,0vw);}
    .ab{position:absolute; z-index:1; width:4vw; height:5vw; border:0.3vh solid white;}
    #ab1{box-sizing:border-box;transform:translate(0vw,1.5vw); background:red; transition:width 1s linear 0s,transform 1s linear 1s, height 1s linear 1s;}
    #ab2{box-sizing:border-box;transform:translate(0vw,6.5vw); background:yellow; transition:width 1s linear 0s,transform 1s linear 1s, height 1s linear 1s;}
    #ab3{box-sizing:border-box;transform:translate(0vw,11.5vw); background:pink; transition:width 1s linear 0s,transform 1s linear 1s, height 1s linear 1s;}
    #ab4{box-sizing:border-box;transform:translate(0vw,16.5vw); background:coral; transition:width 1s linear 0s,transform 1s linear 1s, height 1s linear 1s;}
    #ab5{box-sizing:border-box;transform:translate(0vw,21.5vw); background:green; transition:width 1s linear 0s,transform 1s linear 1s, height 1s linear 1s;}
    #ab6{box-sizing:border-box;transform:translate(0vw,26.5vw); background:blue; transition:width 1s linear 0s,transform 1s linear 1s, height 1s linear 1s;}

    #ab7{box-sizing:border-box;transform:translate(56vw,0vw); background:aqua; margin:1.5vw 0 0 0; transition:width 1s linear 0s,transform 1s linear 0s, height 1s linear 1s, margin 1s linear 1s;}
    #ab8{box-sizing:border-box;transform:translate(56vw,0vw); background:green; margin:6.5vw 0 0 0; transition:width 1s linear 0s,transform 1s linear 0s, height 1s linear 1s, margin 1s linear 1s;}
    #ab9{box-sizing:border-box;transform:translate(56vw,0vw); background:aqua; margin:11.5vw 0 0 0; transition:width 1s linear 0s,transform 1s linear 0s, height 1s linear 1s, margin 1s linear 1s;}
    #ab10{box-sizing:border-box;transform:translate(56vw,0vw); background:green; margin:16.5vw 0 0 0; transition:width 1s linear 0s,transform 1s linear 0s, height 1s linear 1s, margin 1s linear 1s;}
    #ab11{box-sizing:border-box;transform:translate(56vw,0vw); background:aqua; margin:21.5vw 0 0 0; transition:width 1s linear 0s,transform 1s linear 0s, height 1s linear 1s, margin 1s linear 1s;}
    #ab12{box-sizing:border-box;transform:translate(56vw,0vw); background:green; margin:26.5vw 0 0 0; transition:width 1s linear 0s,transform 1s linear 0s, height 1s linear 1s, margin 1s linear 1s;}

    #ab1:hover, #ab2:hover,#ab3:hover, #ab4:hover,#ab5:hover, #ab6:hover,#ab7:hover, #ab8:hover,#ab9:hover, #ab10:hover,#ab11:hover, #ab12:hover{z-index:10; width:60vw; height:33.75vw; border:none; transform:translate(0vw,0vw); margin:0 0 0 0;}
    --></style>


    Vous placerez l'adresse de vote image de fond, éventuellement.

    A la place des background:red;... vous placerez vos adresses image en écrivant:

    background:url('http://...jpg'); background-size:60vw 33.75vw;