• Exemple 5

    Pour celles et ceux qui préfèrent les animations au survol.

    Vous pouvez ajouter ou retirer des couples bouton/image.

    Survol de chaque bouton coloré pour changer d'image.

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 0.1vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/cATYf1XL6AIIV_4NkMLk-Qy_ido.jpg'); background-size: cover;">
    <p id="exp">Survol de chaque bouton color&eacute; pour changer d'image.</p>
    <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="bout5" class="bout">&nbsp;</p>
    <p id="bout6" class="bout">&nbsp;</p>
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    <p id="mg5" class="mg">&nbsp;</p>
    <p id="mg6" class="mg">&nbsp;</p>
    </div>

    <style><!--
    #exp{position:absolute; z-index:1: width:50vw; text-align:center; font-size:1.5vw; color:white; text-shadow:0.1vh 0.1v black; transform:translate(5vw,2vw);}
    .bout{position:absolute; z-index:10; width:2vw; height:2vw; border:0.2vh solid black;}
    #bout1{background:yellow; transform:translate(57.5vw,1vw);}
    #bout2{background:coral; transform:translate(57.5vw,3.5vw);}
    #bout3{background:lime; transform:translate(57.5vw,6vw);}
    #bout4{background:yellow; transform:translate(57.5vw,8.5vw);}
    #bout5{background:coral; transform:translate(57.5vw,11vw);}
    #bout6{background:lime; transform:translate(57.5vw,13.5vw);}
    .mg{position:absolute; z-index:5; width:60vw; height:33.75vw; opacity:0; transition:all 1s linear;}
    #mg1{background:url('http://ekladata.com/Cg-MBQUuNFz3QYOHuJdnF1VN0uQ.jpg');background-size:cover;}
    #mg2{background:url('http://ekladata.com/6o0uTcZkdZC706Ljr4m3ZAQPulI.jpg');background-size:cover;}
    #mg3{background:url('http://ekladata.com/-Upz3czwrqCAgrJ6xa-QNX2k75o.jpg');background-size:cover;}
    #mg4{background:url('http://ekladata.com/hZoCxJPJqv4dOoTi_CpBMbvh-ro.jpg');background-size:cover;}
    #mg5{background:url('http://ekladata.com/_afyRl0Ox11MVs3HExhbtZexPtA.jpg');background-size:cover;}
    #mg6{background:url('http://ekladata.com/TjO-4mzprLyfnvWozok4rHk5P30.jpg');background-size:cover;}
    #bout1:hover ~ #mg1,#bout2:hover ~ #mg2,#bout3:hover ~ #mg3,#bout4:hover ~ #mg4,#bout5:hover ~ #mg5,#bout6:hover ~ #mg6{opacity:1;}
    --></style>