• Lavande 4

    Une variante dans la transition.

     

     

     

     

    Survolez chaque bouton

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 80vw; height: 92vh; margin: 2vh auto; border: 0.3vh ridge white; background: url('http://ekladata.com/UwUvGNOG4U3ebrqMdMF1u_gmUlg.jpg'); background-size: 80vw 92vh;">
    <p id="bout1" class="bout">&nbsp;</p>
    <p id="bout2" class="bout">&nbsp;</p>
    <p id="bout3" class="bout">&nbsp;</p>
    <p id="bout4" class="bout">&nbsp;</p>
    <p id="surv">Survolez chaque bouton</p>
    <p id="lv1" class="dist1">&nbsp;</p>
    <p id="lv2" class="dist1">&nbsp;</p>
    <p id="lv3" class="dist1">&nbsp;</p>
    <p id="lv4" class="dist1">&nbsp;</p>
    <p id="lv5" class="dist2">&nbsp;</p>
    <p id="lv6" class="dist2">&nbsp;</p>
    <p id="lv7" class="dist2">&nbsp;</p>
    <p id="lv8" class="dist2">&nbsp;</p>
    <p id="lv9" class="dist3">&nbsp;</p>
    <p id="lv10" class="dist3">&nbsp;</p>
    <p id="lv11" class="dist3">&nbsp;</p>
    <p id="lv12" class="dist3">&nbsp;</p>
    <p id="lv13" class="dist4">&nbsp;</p>
    <p id="lv14" class="dist4">&nbsp;</p>
    <p id="lv15" class="dist4">&nbsp;</p>
    <p id="lv16" class="dist4">&nbsp;</p>
    </div>

    <style><!--
    @import url('https://fonts.googleapis.com/css?family=Seaweed+Script');
    .bout{position:absolute; z-index:2; width:2vw; height:5vh; border-radius:5vh; border:0.1vh solid black; background:pink; box-shadow:inset 0.1vw 0.1vw 0.3vw black,inset -0.1vw -0.1vw 0.3vw white;}
    #bout1{transform:translate(77vw,5vh);}
    #bout2{transform:translate(77vw,15vh);}
    #bout3{transform:translate(77vw,25vh);}
    #bout4{transform:translate(77vw,35vh);}
    #surv{position:absolute; z-index:1; width:30vw; background:rgba(0,0,0,0.5);text-align:center; font-size:3vw; font-family: 'Seaweed Script', cursive; color:white; text-shadow:0.1vh 0.1vh black; transform:translate(45vw,80vh);}
    .dist1{background:url('http://ekladata.com/P_mAgG-EJXGqiK9t4cuuvASB8QI.jpg'); background-size:80vw 92vh;}
    .dist2{background:url('http://ekladata.com/KwUD0Ms8a6GOhdC9V_kN_-gjjG8.jpg'); background-size:80vw 92vh;}
    .dist3{background:url('http://ekladata.com/BNl3OhEz7sWC6dxcf9DbqxHkT_M.jpg'); background-size:80vw 92vh;}
    .dist4{background:url('http://ekladata.com/deNbajgUiUVecTxqdqLduCOd_wY.jpg'); background-size:80vw 92vh;}

    #lv1,#lv5,#lv9,#lv13{position:absolute; z-index:1; width:20vw; height:92vh; transform:translate(0vw,0vh) rotatey(90deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
    #lv2,#lv6,#lv10,#lv14{position:absolute; z-index:1; width:20vw; height:92vh; transform:translate(20vw,0vh) rotatey(90deg); background-position:-20vw 0vh; transition:all 1s linear 0.1s;}
    #lv3,#lv7,#lv11,#lv15{position:absolute; z-index:1; width:20vw; height:92vh; transform:translate(40vw,0vh) rotatey(90deg); background-position:-40vw 0vh; transition:all 1s linear 0.2s;}
    #lv4,#lv8,#lv12,#lv16{position:absolute; z-index:1; width:20vw; height:92vh; transform:translate(60vw,0vh) rotatey(90deg); background-position:-60vw 0vh; transition:all 1s linear 0.3s;}


    #bout1:hover ~ #lv1,#bout2:hover ~ #lv5,#bout3:hover ~ #lv9,#bout4:hover ~ #lv13{transform:translate(0vw,0vh) rotatey(0deg); background-position:0vw 0vh;}
    #bout1:hover ~ #lv2,#bout2:hover ~ #lv6,#bout3:hover ~ #lv10,#bout4:hover ~ #lv14{transform:translate(20vw,0vh) rotatey(0deg); background-position:-20vw 0vh;}
    #bout1:hover ~ #lv3,#bout2:hover ~ #lv7,#bout3:hover ~ #lv11,#bout4:hover ~ #lv15{transform:translate(40vw,0vh) rotatey(0deg); background-position:-40vw 0vh;}
    #bout1:hover ~ #lv4,#bout2:hover ~ #lv8,#bout3:hover ~ #lv12,#bout4:hover ~ #lv16{transform:translate(60vw,0vh) rotatey(0deg); background-position:-60vw 0vh;}
    --></style>

    Chaque image est découpée en 4 sections, en rotation de 90°; au survol d'un bouton, l'image de fond est changée et les 4 sections d'une image tournent vers 0°.