• Déjà proposé; article du 25/1/16

    Survolez chaque rond.

     

     

     

     

     

    <div id="fd">
    <p id="f1">&nbsp;</p>
    <p id="f2">&nbsp;</p>
    <p id="f3">&nbsp;</p>
    <p id="f4">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    #fd{position:relative; z-index:1; width:800px; height:600px; margin:10px auto;}
    #f1{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; transition:all 1s linear; transform:translate(50px,50px); background:url(http://ekladata.com/_VTOQhkpG3yZp-IthiyvVSBHn7o/6664.jpg); background-position:50% 50%; box-shadow:4px 4px 6px black;}
    #f2{position:absolute; width:200px; height:200px; border-radius:50%; transition:all 1s linear; transform:translate(150px,350px); background:url(http://ekladata.com/PuLm3VXaIsJMpqzS_HDCdx88jLA/6667.jpg); background-position:50% 50%; box-shadow:4px 4px 6px black;}
    #f3{position:absolute; width:200px; height:200px; border-radius:50%; transition:all 1s linear; transform:translate(350px,100px); background:url(http://ekladata.com/wXIlVHztUpMhzjuqR3aRF7qMJOM/6678.jpg); background-position:50% 50%; box-shadow:4px 4px 6px black;}
    #f4{position:absolute; width:200px; height:200px; border-radius:50%; transition:all 1s linear; transform:translate(550px,300px); background:url(http://ekladata.com/67i7WyBdX6z2YB-csf8Rt5GHbZY/6679.jpg); background-position:50% 50%; box-shadow:4px 4px 6px black;}
    #f1:hover, #f2:hover, #f3:hover, #f4:hover{z-index:2; width:800px; height:600px; transform:translate(0px,0px); border-radius:0%;box-shadow:0px 0px 0px black;}
    --></style>
    Adresses images en 800x600px, en rouge.
    Vous pouvez ajouter ou retirer des images, en modifier la position ou/ou la forme...
    Dans l'article suivant, les ronds seront animés en automatique, dans un cadre mais on peut placer ce montage dans un cadre, également.