• Diapo 2 ovale

     

    2

    3

    4

     

     

     

     

    Survolez les numéros.
    <div id="mon2">
    <p id="b2a">2</p>
    <p id="b3a">3</p>
    <p id="b4a">4</p>
    <p id="l1a">&nbsp;</p>
    <p id="l2a">&nbsp;</p>
    <p id="l3a">&nbsp;</p>
    <p id="l4a">&nbsp;</p>
    </div>
    <style><!--
    #mon2{position:relative; width:1012px; height:590px; overflow:hidden; margin:10px auto;}
    #b2a{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(880px,500px);}
    #b3a{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(920px,500px);}
    #b4a{ position:absolute; z-index:10; width:20px; height:20px; font-size:25pt; transform:translate(960px,500px);}
    #l1a{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/20/DSCN5299.JPG');}
    #l2a{transition:all 1s linear; position:absolute; transform:translate(0px,-590px); width:1000px; height:563px; border-radius:50%; border:4px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/20/DSCN5300.JPG');}
     #l3a{transition:all 1s linear; position:absolute; transform:translate(0px,-590px); width:1000px; height:563px; border-radius:50%; border:4px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/20/DSCN5301.JPG');}
    #l4a{transition:all 1s linear; position:absolute; transform:translate(0px,-590px); width:1000px; height:563px; border-radius:50%; border:4px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/20/DSCN5302.JPG');}
     #b2a:hover ~ #l2a{transform:translate(0px,0px);}
     #b3a:hover ~ #l3a{transform:translate(0px,0px);}
     #b4a:hover ~ #l4a{transform:translate(0px,0px);}
    --></style>
    ...