• Diapo 3 ovale

    2

    3

    4

    5

     

     

     

     

     

    Survolez les chiffres
    Variante à partir du code diapo 2 ovale, avec juste l'animation qui change.
    <div id="mon">
    <p id="b2">2</p>
    <p id="b3">3</p>
    <p id="b4">4</p>
    <p id="b5">5</p>
    <p id="l1">&nbsp;</p>
    <p id="l2">&nbsp;</p>
    <p id="l3">&nbsp;</p>
    <p id="l4">&nbsp;</p>
    <p id="l5">&nbsp;</p>
    </div>
    <style><!--
    #mon{position:relative; width:1015px; height:590px; overflow:hidden; margin:10px auto;}
    #b2{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(860px,0px);}
    #b3{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(890px,20px);}
    #b4{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(920px,40px);}
    #b5{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(950px,70px);}

    #l1{transition:all 1s linear; position:absolute; transform:translate(0px,0px); width:1000px; height:563px; border-radius:50%; border:4px solid white; box-shadow:4px 4px black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/19/DSCN5254.JPG');}
    #l2{transition:all 1s linear; position:absolute; transform:translate(500px,0px); width:0px; height:563px; border-radius:50%; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/19/DSCN5259.JPG');}
    #l3{transition:all 1s linear; position:absolute; transform:translate(500px,0px); width:0px; height:563px; border-radius:50%; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/19/DSCN5261.JPG');}
    #l4{transition:all 1s linear; position:absolute; transform:translate(500px,0px); width:0px; height:563px; border-radius:50%; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/19/DSCN5264.JPG');}
    #l5{transition:all 1s linear; position:absolute; transform:translate(500px,0px); width:0px; height:563px; border-radius:50%; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/19/DSCN5265.JPG');}
    #b2:hover ~ #l2{transform:translate(4px,4px); width:1000px;}
    #b3:hover ~ #l3{transform:translate(4px,4px); width:1000px;}
    #b4:hover ~ #l4{transform:translate(4px,4px); width:1000px;}
    #b5:hover ~ #l5{transform:translate(4px,4px); width:1000px;}
    --></style>
    Les images qui apparaissent sont dimensionnées en largeur à 0 px et centrées sur l'image de fond; la hauteur est celle des images, soir 563px.
    Au survol d'un chiffre, la largeur passe à 1000px et le positionnement aligné à gauche.