• Exemple bouton invisible

     

     

     

     

     

     

     

    <div id="fd">
    <p id="bt0">&nbsp;</p>
    <p id="bt1">&nbsp;</p>
    <p id="bt2">&nbsp;</p>
    <p id="im0">&nbsp;</p>
    <p id="im1">&nbsp;</p>
    <p id="im2">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #fd{width:800px; height:600px; border-radius:50%; margin:10px auto; border:4px solid white; box-shadow:4px 4px 6px black;}
    #bt0{position:absolute; z-index:10; width:50px; height:50px; border-radius:50%; border:2px dotted white; transform:translate(375px,50px);}
    #bt1{position:absolute; z-index:10; width:50px; height:50px; border-radius:50%; border:2px dotted white; transform:translate(300px,70px);}
    #bt2{position:absolute; z-index:10; width:50px; height:50px; border-radius:50%; border:2px dotted white; transform:translate(450px,70px);}
    #im0{position:absolute; z-index:1; width:800px; height:600px;border-radius:50%; background:url(http://ekladata.com/kcBBHg1HuvYGVdWM6I6dbsVv4E4/6157.jpg);}
    #im1{position:absolute; z-index:5; transition:all 0.5s linear; width:800px; height:600px; border-radius:50%; background:url(http://ekladata.com/KWC0uBfm36TS-ZNGApAhT58SnxM/6191.jpg); opacity:0;}
    #im2{position:absolute; z-index:5; transition:all 0.5s linear; width:800px; height:600px; border-radius:50%; background:url(http://ekladata.com/biNuOpLrMEccF_4LEikXGje0_Fk/6193.jpg); opacity:0;}
    #bt1:hover{ opacity:0; z-index:15;}
    #bt2:hover{ opacity:0; z-index:15;}
    #bt0:hover ~ #im0{z-index:11;}
    #bt1:hover ~ #im1{opacity:1; z-index:11;}
    #bt2:hover ~ #im2{opacity:1; z-index:11;}
    --></style>
    3 images en 800x600px avec ajout d'un bouton pour afficher la première image librement.
    Vous pouvez placer ces boutons à votre guise et leur donner la forme qui vous convient.