• Diapo ovale

     

    2

    3

    4

    5

    6

    7

    8

     

     

     

     

     

     

     

     

    Survolez chaque numéro.
    <div id="mon">
    <p id="b2">2</p>
    <p id="l1">&nbsp;</p>
    <p id="l2">&nbsp;</p>
    </div>
    <style><!--
    #mon{position:absolute; width:1008px; height:580px; overflow:hidden;}
    #b2{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(950px,0px);}
    #l1{transition:all 1s linear; position:absolute; transform:translate(0px,0px); width:1000px; height:563px; border-radius:50%; border:4px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/20/DSCN5288.JPG');}
    #l2{transition:all 1s linear; position:absolute; transform:translate(-1010px,0px); width:1000px; height:563px; border-radius:50%; border:4px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/20/DSCN5289.JPG');}
    #b2:hover ~ #l2{transform:translate(0px,0px);}
    --></style>

    Ajoutez autant de couples bouton/image (B9/l9) et ajoutez la dernière ligne d'animation pour chaque nouveau couple (#b9:hover ~ #l9{ idem pour tous}).
    ...