• lunaire 3

    Un montage en 1552x648px et au survol de 6 boutons invisibles à chercher, à adapter à vos besoins.

     

     

     

     

     

     

    Pour positionner vos boutons, leur donner une bordure.

    Ici, 5 images verticales et 1 horizontale mais vous pouvez adapter.

    Le survol d'un bouton modifie l'opacité de l'image correspondante et celle de l'image de fond.

    <div style="width: 60vw; height: 33.75vw; margin: 0 auto; text-align: left; border: 0.4vh ridge white; box-shadow: 0.4vh 0.4vh 0.6vh black;">
    <p id="egl1" class="egl">&nbsp;</p>
    <p id="egl2" class="egl">&nbsp;</p>
    <p id="egl3" class="egl">&nbsp;</p>
    <p id="egl4" class="egl">&nbsp;</p>
    <p id="egl5" class="egl">&nbsp;</p>
    <p id="egl6" class="egl">&nbsp;</p>
    <img id="aut0" src="http://ekladata.com/NLueza7on7IpIDzsTePEiej2_cA@1152x648.jpg" alt="" /> <img id="aut1" class="aut" src="http://ekladata.com/7zRUaNIBueWCFFeA4y9t_Ky8OwQ@364x648.jpg" alt="" /> <img id="aut2" class="aut" src="http://ekladata.com/1OuWYWPfc81QGRq7OYO4dWXnYAo@364x648.jpg" alt="" /> <img id="aut3" class="aut" src="http://ekladata.com/bNmrLXn_-DRwUeRZqKXjB4orjo0@364x648.jpg" alt="" /> <img id="aut4" class="aut" src="http://ekladata.com/ZlNMsmHf_FJ8YJP3ABQLtzPSRb8@364x648.jpg" alt="" /> <img id="aut5" class="aut" src="http://ekladata.com/bNOSBoDSunuyGXj5R1J1OzLia0U@364x648.jpg" alt="" /> <img id="aut6" src="http://ekladata.com/Ia490hNkpEhbY68QbI87V1zPw0s@1152x648.jpg" alt="" /></div>
    <style><!--
    .egl{position:absolute; z-index:10; width:8vw; height:8vw; border-radius:50%;}
    #egl1{transform:translate(5vw,5vw);}
    #egl2{transform:translate(25vw,5vw);}
    #egl3{transform:translate(45vw,5vw);}
    #egl4{transform:translate(5vw,20vw);}
    #egl5{transform:translate(25vw,20vw);}
    #egl6{transform:translate(45vw,20vw);}
    .aut{position:absolute; z-index:5; width:19vw; height:33.75vw; transform:translate(22vw,0vw); opacity:0;}
    #aut0{position:absolute; z-index:1; width:60vw; height:33.75vw; transform:translate(0vw,0vw); opacity:1;}
    #aut6{position:absolute; z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw); opacity:0;}
    #egl1:hover ~ #aut1,#egl2:hover ~ #aut2,#egl3:hover ~ #aut3,#egl4:hover ~ #aut4,#egl5:hover ~ #aut5,#egl6:hover ~ #aut6{opacity:1;}
    #egl1:hover ~ #aut0,#egl2:hover ~ #aut0,#egl3:hover ~ #aut0,#egl4:hover ~ #aut0,#egl5:hover ~ #aut0,#egl6:hover ~ #aut0{opacity:0.3;}
    --></style>