• Selection fond 3

    Afin de vérifier que, sur le code de ma page précédente, on change simplement l'adresse des images et que l'affichage s'adapte à la résolution de l'écran de lecture, voici le même code que précédemment, avec 2 images, divisées en 4 parties et 2 boutons à survoler.... ta ta ta tsouin !
    Survolez chaque bouton.

     

    1

    2

     

     

     

     

     

     

     

     

    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.2vw solid white; background: url('http://ekladata.com/r2lomrjLC0MTYyJPJaR-0DmaCQs.jpg'); background-size: 100% 100%;">
    <p id="bout1" class="bout">1</p>
    <p id="bout2" class="bout">2</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>
    </div>

    <style><!--
    .bout{position:absolute; z-index:10; width:3vw; height:3vw; border-radius:50%; text-align:center; line-height:3vw; border:0.1vw solid white; box-shadow:inset 0.1vw 0.1vw 0.2vw black, inset -0.1vw -0.1vw 0.2vw white; background:linear-gradient(to top, red 0%, yellow 100%); font-size:2vw; color:white; text-shadow:0.1vw 0.1vw black;}
    #bout1{transform:translate(76vw,4vh);}
    #bout2{transform:translate(76vw,24vh);}
    .xx{position:absolute; z-index:1; background:url('http://ekladata.com/JqIOiBL04HWe84FVCLopVJkadNY.jpg'); background-size:80vw 92vh;}
    #xx1{width:10vw; height:30vh; transform:translate(5vw,5vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
    #xx2{width:10vw; height:30vh; transform:translate(25vw,40vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.2s;}
    #xx3{width:10vw; height:30vh; transform:translate(45vw,5vh) rotatey(180deg); background-position:-40vw 0vh; transition:all 1s linear 0.4s;}
    #xx4{width:10vw; height:30vh; transform:translate(65vw,40vh) rotatey(180deg); background-position:-60vw 0vh; transition:all 1s linear 0.6s;}
    .xy{position:absolute; z-index:1; background:url('http://ekladata.com/kHe9c-2Ne60OetZaGHs3ncBivFc.jpg'); background-size:80vw 92vh;}
    #xy1{width:10vw; height:30vh; transform:translate(5vw,40vh) rotatey(180deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
    #xy2{width:10vw; height:30vh; transform:translate(25vw,5vh) rotatey(180deg); background-position:-20vw 0vh; transition:all 1s linear 0.2s;}
    #xy3{width:10vw; height:30vh; transform:translate(45vw,40vh) rotatey(180deg); background-position:-40vw 0vh; transition:all 1s linear 0.4s;}
    #xy4{width:10vw; height:30vh; transform:translate(65vw,5vh) rotatey(180deg); background-position:-60vw 0vh; transition:all 1s linear 0.6s;}
    #bout1:hover ~ #xx1, #bout2:hover ~ #xy1{z-index:5; width:20vw; height:92vh; transform:translate(0vw,0vh) rotatey(0deg);}
    #bout1:hover ~ #xx2, #bout2:hover ~ #xy2{z-index:5; width:20vw; height:92vh; transform:translate(20vw,0vh) rotatey(0deg);}
    #bout1:hover ~ #xx3, #bout2:hover ~ #xy3{z-index:5; width:20vw; height:92vh; transform:translate(40vw,0vh) rotatey(0deg);}
    #bout1:hover ~ #xx4, #bout2:hover ~ #xy4{z-index:5; width:20vw; height:92vh; transform:translate(60vw,0vh) rotatey(0deg);}
    --></style>