• Exemple 187

    Le montage précédent est au clic; pour avoir un montage au survol ou au clic maintenu, il faut ajouter des boutons.

    L'animation est ici par changement d'opacité mais on peut en choisir d'autres.

    SURVOL

     

     

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 1vh auto; border: 1px solid black; text-align: left; background: url('http://ekladata.com/ctne5gcpUOgM3cQ7E594DkZNIgg.jpg'); background-size: cover;">
    <p id="avan">SURVOL</p>
    <p id="surv1" class="surv">&nbsp;</p>
    <p id="surv2" class="surv">&nbsp;</p>
    <p id="surv3" class="surv">&nbsp;</p>
    <p id="surv4" class="surv">&nbsp;</p>
    <p id="surv5" class="surv">&nbsp;</p>
    <p id="surv6" class="surv">&nbsp;</p>
    <p id="surv7" class="surv">&nbsp;</p>
    <img id="val1" class="val" src="http://ekladata.com/DXLQQ8ufT_V4icwGr_jbTvWdpQE.jpg" alt="" /> <img id="val2" class="val" src="http://ekladata.com/_HDodknXTjBnqDwJ0gqlJQuNR0w.jpg" alt="" /> <img id="val3" class="val" src="http://ekladata.com/0bpjBg3bkfQDV0zuAaz978DjYlA.jpg" alt="" /> <img id="val4" class="val" src="http://ekladata.com/D6zAg3ii4pEDq9xH2Y0DEa0IpNU.jpg" alt="" /> <img id="val5" class="val" src="http://ekladata.com/Rz_-Rhv0Dnvz1EL1oWxS1UrPnQc.jpg" alt="" /> <img id="val6" class="val" src="http://ekladata.com/vb3971dlb5fUn5Ua6ivJrspwMsw.jpg" alt="" /> <img id="val7" class="val" src="http://ekladata.com/atIRGYRGgFaoOX9Nj_cv_dCe9Ic.jpg" alt="" /></div>
    <style><!--
    #avan{position:absolute; z-index:5; width:30px; height:250px; text-align:center; transform:translate(950px,300px); font-size:30px; color:white; text-shadow:1px 1px black; background:rgba(0,0,0,0.5); white-space:normal;}
    .surv{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; background:pink; box-shadow:inset 5px 5px 6px black;}
    #surv1{transform:translate(950px,10px);}
    #surv2{transform:translate(950px,50px);}
    #surv3{transform:translate(950px,90px);}
    #surv4{transform:translate(950px,130px);}
    #surv5{transform:translate(950px,170px);}
    #surv6{transform:translate(950px,210px);}
    #surv7{transform:translate(950px,250px);}
    .val{position:absolute; z-index:1; width: 1000px; height: 562px; opacity:0; transition:all 0.5s linear;}
    #surv1:hover ~ #val1,#surv2:hover ~ #val2,#surv3:hover ~ #val3,#surv4:hover ~ #val4,#surv5:hover ~ #val5,#surv6:hover ~ #val6,#surv7:hover ~ #val7{opacity:1;}
    --></style>