• selection

    Une fidèle visiteuse me fait revenir sur ma page Anim sujet et je reprends un autre principe ici, avec un code simplifié et en inversant l'animation.

    Désolé, mais je manque d'idée ayant, comme tout le monde, d'autres soucis plus importants.

    Survolez les ronds.

     

     

     

     

     

    <div id="fd">
    <p id="tt">Survolez les ronds.</p>
    <p id="s1">&nbsp;</p>
    <p id="s2">&nbsp;</p>
    <p id="s3">&nbsp;</p>
    <p id="s4">&nbsp;</p>
    <p id="s5">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #fd{position:relative; width:800px; height:600px; margin:10px auto; background:url('http://ekladata.com/BMOQK1Ljhx_noMHzNsH4BX293_0/fondo.jpg'); border:6px ridge white;}
    #tt{position:absolute; z-index:1; width:400px; height:50px; transform:translate(200px,20px); text-align:center; font-size:25pt; color:coral; text-shadow:1px 1px black;}
    #s1{position:absolute; transition:all 2s linear; width:100px; height:100px; border:4px solid white; box-shadow:3px 3px 6px black; border-radius:50%; background:url('http://ekladata.com/M2CmFHIyQr7ocQLilZ0AEs1vhI0/3563.jpg'); transform:translate(50px,150px); background-position:50% 50%;}
    #s1:hover{width:800px; height:600px; transform:translate(0px,0px); z-index:5; border:0px; border-radius:0%; box-shadow:0px 0px 0px;}
    #s2{position:absolute; transition:all 2s linear; width:100px; height:100px; border:4px solid white; box-shadow:3px 3px 6px black; border-radius:50%; background:url('http://ekladata.com/_Tf1LiKIRUReOlR3EzS7Hu6f0SM/3564.jpg'); transform:translate(
    350px,150px); background-position:60% 50%;}
    #s2:hover{width:800px; height:600px; transform:translate(0px,0px); z-index:5; border:0px; border-radius:0%; box-shadow:0px 0px 0px;}
    #s3{position:absolute; transition:all 2s linear; width:100px; height:100px; border:4px solid white; box-shadow:3px 3px 6px black; border-radius:50%; background:url('http://ekladata.com/wh8MGiS_FSeuwdXyTEBgL6RUyvo/3565.jpg'); transform:translate(650px,150px); background-position:50% 50%;}
    #s3:hover{width:800px; height:600px; transform:translate(0px,0px); z-index:5; border:0px; border-radius:0%; box-shadow:0px 0px 0px;}
    #s4{position:absolute; transition:all 2s linear; width:100px; height:100px; border:4px solid white; box-shadow:3px 3px 6px black; border-radius:50%; background:url('http://ekladata.com/SO6k5YObxGC_6699yf1hAqvEdXY/3567.jpg'); transform:translate(200px,300px); background-position:50% 50%;}
    #s4:hover{width:800px; height:600px; transform:translate(0px,0px); z-index:5; border:0px; border-radius:0%; box-shadow:0px 0px 0px;}
    #s5{position:absolute; transition:all 2s linear; width:100px; height:100px; border:4px solid white; box-shadow:3px 3px 6px black; border-radius:50%; background:url('http://ekladata.com/OwVT8CpcP0IUQhu0BqvdwgkFVow/3569.jpg'); transform:translate(500px,300px); background-position:50% 50%;}
    #s5:hover{width:800px; height:600px; transform:translate(0px,0px); z-index:5; border:0px; border-radius:0%; box-shadow:0px 0px 0px;}
    --></style>

    Survolez ce bourgeon déjà prêt pour le printemps...

     

     

    <p id="mz">&nbsp;</p>
    <style type="text/css"><!--
    #mz{position:absolute; transition:all 2s linear; width:800px; height:600px; border:4px solid white; box-shadow:3px 3px 6px black;background:url('http://ekladata.com/BOtJHbGk0wg6C61jDY69vg85lXw/6629.jpg'); transform:translate(0px,0px); background-position:60% 25%;}
    #mz:hover{width:150px; height:150px; border-radius:50%; transform:translate(400px,100px); border:0px; border-radius:50%; box-shadow:0px 0px 0px; }
    --></style>