• Fredcloclo7

    Un diaporama uniquement en css.

    Exemple avec 4 images au ratio 16/9, en 1000x563px; on peut imaginer plus d'images avec modification.

    Déplacer les pages (2 ici) par un clic sur les boutons et survolez chaque image pour l'agrandir.

     

     

     

     


    <div style="position: relative; width: 1000px; height: 563px; margin: 30px auto; text-align: left; overflow: hidden; border: 1px solid black;"><input id="dip1" type="text" value="&lt;" /> <input id="dip2" type="text" value="&gt;" />
    <div id="pg1">
    <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>
    </div>
    </div>
    <style><!--
    #dip1{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; font-size:25px; text-align:center; line-height:30px; transform:translate(0px,250px);}
    #dip2{position:absolute; z-index:5; width:30px; height:30px; border-radius:50%; font-size:25px; text-align:center; line-height:30px; transform:translate(960px,250px);}
    #pg1{position:absolute; display:inline-block; width:2000px; height:563px; transform:translate(0px,0px);transition:all 1s;}
    .mg{position:absolute; z-index:1; width:500px; height:563px; border:4px solid white; transition:all 1s;}
    #mg1{box-sizing:border-box; background:url('http://ekladata.com/xiCUzjPZ7riJzg8qq0qzEEB_-PU.jpg'); background-size:1000px 563px; background-position:0px 0px; transform:translate(0px,0px);}
    #mg2{box-sizing:border-box; background:url('http://ekladata.com/KypNF_6w_qsickJt2kfngpYJl4A.jpg'); background-size:1000px 563px; background-position:-500px 0px; transform:translate(500px,0px);}
    #mg3{box-sizing:border-box; background:url('http://ekladata.com/fnQ4swdUECe33zvRGueRKX2ZCSQ.jpg'); background-size:1000px 563px; background-position:-1000px 0px; transform:translate(1000px,0px);}
    #mg4{box-sizing:border-box; background:url('http://ekladata.com/b0xNC1a2FPKG_KnHk1wGTWMTXa8.jpg'); background-size:1000px 563px; background-position:-1500px 0px; transform:translate(1500px,0px);}
    #dip1:focus ~ #pg1{transform:translate(0px,0px);}
    #dip2:focus ~ #pg1{transform:translate(-1000px,0px);}
    #mg1:hover{z-index:5; width:1000px; background-position:0px 0px; transform:translate(0px,0px);}
    #mg2:hover{z-index:5; width:1000px; background-position:0px 0px; transform:translate(0px,0px);}
    #mg3:hover{z-index:5; width:1000px; background-position:-1000px 0px; transform:translate(1000px,0px);}
    #mg4:hover{z-index:5; width:1000px; background-position:-1000px 0px; transform:translate(1000px,0px);}
    --></style>