• Selection fond 6 en 40vw

    Modification du code précédent pour obtenir un montage de 40% de la largeur de votre écran.

    Remplacez mes adresses images par les vôtres, quelles que soient leurs dimensions mais au rapport 16/9.

    1

    2

    3

    4

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    <div style="width: 40vw; height: 46vh; margin: 1vh auto; border: 0.1vw solid white; background: url('http://ekladata.com/4GXHkP_pDW9WjDCge2jLXVyoMYc.jpg'); background-size: 100% 100%;">
    <p id="bout1" class="bout">1</p>
    <p id="bout2" class="bout">2</p>
    <p id="bout3" class="bout">3</p>
    <p id="bout4" class="bout">4</p>
    <p id="xw1" class="xw">&nbsp;</p>
    <p id="xw2" class="xw">&nbsp;</p>
    <p id="xw3" class="xw">&nbsp;</p>
    <p id="xw4" class="xw">&nbsp;</p>
    <p id="xx1" class="xx">&nbsp;</p>
    <p id="xx2" class="xx">&nbsp;</p>
    <p id="xx3" class="xx">&nbsp;</p>
    <p id="xx4" class="xx">&nbsp;</p>
    <p id="xy1" class="xy">&nbsp;</p>
    <p id="xy2" class="xy">&nbsp;</p>
    <p id="xy3" class="xy">&nbsp;</p>
    <p id="xy4" class="xy">&nbsp;</p>
    <p id="xz1" class="xz">&nbsp;</p>
    <p id="xz2" class="xz">&nbsp;</p>
    <p id="xz3" class="xz">&nbsp;</p>
    <p id="xz4" class="xz">&nbsp;</p>
    </div>

    <style><!--
    .bout{position:absolute; z-index:10; width:1vw; height:1.5vw; text-align:center; line-height:1.5vw; border:0.05vw solid white; box-shadow:inset -0.1vw -0.1vw 0.1vw black, inset 0.1vw 0.1vw 0.15vw white; background:linear-gradient(to top, red 0%, yellow 100%); font-size:1.5vw; color:white; text-shadow:0.05vw 0.05vw black;}
    #bout1{transform:translate(37vw,2vh);}
    #bout2{transform:translate(37vw,7vh);}
    #bout3{transform:translate(37vw,12vh);}
    #bout4{transform:translate(37vw,17vh);}
    .xw{position:absolute; z-index:1; background:url('http://ekladata.com/vqoHF2vuwtf9bNjFX4bMb5xzohA.jpg'); background-size:40vw 46vh;}
    #xw1{width:4vw; height:4vw; border:0.2vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(5vw,2.5vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
    #xw2{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(12.5vw,12.5vh) rotatey(180deg); background-position:-10vw 0vh; transition:all 1s linear 0.1s;}
    #xw3{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(20vw,22.5vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.2s;}
    #xw4{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(27.5vw,32.5vh) rotatey(180deg); background-position:-30vw 0vh; transition:all 1s linear 0.3s;}
    .xx{position:absolute; z-index:1; background:url('http://ekladata.com/H5gps0-4hEWO_UePc7-pDW7JGI8.jpg'); background-size:40vw 46vh;}
    #xx1{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(5vw,12.5vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
    #xx2{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(12.5vw,22.5vh) rotatey(180deg); background-position:-10vw 0vh; transition:all 1s linear 0.1s;}
    #xx3{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(20vw,32.5vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.2s;}
    #xx4{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(27.5vw,2.5vh) rotatey(180deg); background-position:-30vw 0vh; transition:all 1s linear 0.3s;}
    .xy{position:absolute; z-index:1; background:url('http://ekladata.com/hbLtGN70lGyeLyrY2IBB2W9F0Po.jpg'); background-size:40vw 46vh;}
    #xy1{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(5vw,22.5vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
    #xy2{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(12.5vw,32.5vh) rotatey(180deg); background-position:-10vw 0vh; transition:all 1s linear 0.1s;}
    #xy3{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(20vw,2.5vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.2s;}
    #xy4{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(27.5vw,12.5vh) rotatey(180deg); background-position:-30vw 0vh; transition:all 1s linear 0.3s;}
    .xz{position:absolute; z-index:1; background:url('http://ekladata.com/bDeRvnVKX9EiHGjlOMFcaoPf__0.jpg'); background-size:40vw 46vh;}
    #xz1{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(5vw,32.5vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
    #xz2{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(12.5vw,2.5vh) rotatey(180deg); background-position:-10vw 0vh; transition:all 1s linear 0.1s;}
    #xz3{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(20vw,12.5vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.2s;}
    #xz4{width:4vw; height:4vw; border:0.1vw solid white; box-shadow:-0.1vw -0.1vw 0.15vw black, inset 0.15vw 0.15vw 0.2vw black, inset -0.1vw -0.1vw 0.15vw white; border-radius:50%; transform:translate(27.5vw,22.5vh) rotatey(180deg); background-position:-30vw 0vh; transition:all 1s linear 0.3s;}
    .bout:hover{background:linear-gradient(to top, green 0%, yellow 100%);}
    #bout1:hover ~ #xw1, #bout2:hover ~ #xx1, #bout3:hover ~ #xy1, #bout4:hover ~ #xz1{z-index:5; width:10vw; height:46vh; transform:translate(0vw,0vh) rotatey(0deg); border-radius:0%; border:none; box-shadow:none;}
    #bout1:hover ~ #xw2, #bout2:hover ~ #xx2, #bout3:hover ~ #xy2, #bout4:hover ~ #xz2{z-index:5; width:10vw; height:46vh; transform:translate(10vw,0vh) rotatey(0deg); border-radius:0%; border:none; box-shadow:none;}
    #bout1:hover ~ #xw3, #bout2:hover ~ #xx3, #bout3:hover ~ #xy3, #bout4:hover ~ #xz3{z-index:5; width:10vw; height:46vh; transform:translate(20vw,0vh) rotatey(0deg);border-radius:0%; border:none; box-shadow:none;}
    #bout1:hover ~ #xw4, #bout2:hover ~ #xx4, #bout3:hover ~ #xy4, #bout4:hover ~ #xz4{z-index:5; width:10vw; height:46vh; transform:translate(30vw,0vh) rotatey(0deg); border-radius:0%; border:none; box-shadow:none;}
    --></style>