• Mont.22.4.23

    Survol des onglets pour faire apparaître des images au ratio 16/9, en 1000x563px.

     

     

     

     

     

     

    Dans cet exemple,6 boutons à survoler qui commandent 6 images; on peut multiplier le nombre de couple Bouton/Image et modifier le type de commande par un clic maintenu (active) ou au clic (focus) à la place de hover.

    <div style="position: relative; overflow: hidden; width: 1000px; height: 563px; margin: 30px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/weOknjSaGhIo0xJNWn8amr_ldZs.jpg'); background-size: cover;"><input id="ong1" class="ong" type="text" value="1" /> <input id="ong2" class="ong" type="text" value="2" /> <input id="ong3" class="ong" type="text" value="3" /> <input id="ong4" class="ong" type="text" value="4" /> <input id="ong5" class="ong" type="text" value="5" /> <input id="ong6" class="ong" type="text" value="6" />
    <p id="prt1" class="prt">&nbsp;</p>
    <p id="prt2" class="prt">&nbsp;</p>
    <p id="prt3" class="prt">&nbsp;</p>
    <p id="prt4" class="prt">&nbsp;</p>
    <p id="prt5" class="prt">&nbsp;</p>
    <p id="prt6" class="prt">&nbsp;</p>
    </div>
    <style><!--
    .ong{position:absolute; z-index:5; width:30px; height:30px; text-align:center; font-size:30px; border:1px solid black; box-shadow:inset 3px 3px 5px black; border-radius:0px 0px 10px 10px;}
    #ong1{transform:translate(120px,0px);}
    #ong2{transform:translate(190px,0px);}
    #ong3{transform:translate(260px,0px);}
    #ong4{transform:translate(330px,0px);}
    #ong5{transform:translate(400px,0px);}
    #ong6{transform:translate(470px,0px);}
    #ong1:hover,#ong2:hover,#ong3:hover,#ong4:hover,#ong5:hover,#ong6:hover{background:lime;}
    .prt{position:absolute; z-index:1; width:150px; height:150px; border-radius:50%; background-size:1000px 563px; transform:translate(425px,200px); opacity:0; transition: all 1s 1s, opacity 0.5s 0s;}
    #prt1{background:url('http://ekladata.com/qfGRj8yHlTnXQGhdjVWHdIhZqtI.jpg');background-position:-425px -200px; }
    #prt2{background:url('http://ekladata.com/qZLcFQkI4jE2aoePnNMRVYpOHz4.jpg');background-position:-425px -200px; }
    #prt3{background:url('http://ekladata.com/zLqMogFAb0RBgUWQcsCzJ4LcDh8.jpg'); background-position:-425px -200px;}
    #prt4{background:url('http://ekladata.com/QpMja0nu0OaEF2lvPoCw-p5Fx9I.jpg');background-position:-425px -200px; }
    #prt5{background:url('http://ekladata.com/-UQd0aK592UZxUiPjdRdSFF311k.jpg'); background-position:-425px -200px; }
    #prt6{background:url('http://ekladata.com/PLkV5u7hpgb3Lik4rmGSD-7ZYgw.jpg'); background-position:-425px -200px;}
    #ong1:hover ~ #prt1,#ong2:hover ~ #prt2,#ong3:hover ~ #prt3,#ong4:hover ~ #prt4,#ong5:hover ~ #prt5,#ong6:hover ~ #prt6{z-index:3; width:1000px; height:563px; border-radius:0%;opacity:1; background-position:0px 0px; transform:translate(0px,0px);}
    --></style>