• Genêt

     

    Survolez ce rond.
    Une ombre chinoise sur un genêt à balai
     

    Le mont Ventoux, en arrière plan.

    Ce montage pour rappeler que les transitions peuvent être différentes selon l'attribut: arrondi, largeur, hauteur, positionnement... de façon à créer une animation.
    Attention cependant de ne pas déplacer l'image de sous le curseur...
    <div style="width: 1006px; height: 569px; margin: 10px auto; border: 1px solid black; background: url('http://fonds.toutimages.com/fo_bleuclair/bleucla_004.jpg');">
    <div id="com">Survolez ce rond.<br /><span style="font-size: 14pt; color: coral; text-shadow: 1px 1px black;">Une ombre chinoise sur un gen&ecirc;t &agrave; balai</span></div>
    <div id="gen">&nbsp;</div>
    </div>
    <style><!--
    #com{position:absolute; transform:translate(350px,20px); text-align:center; font-size:30pt; color:coral; text-shadow:1px 1px black;}
    #gen{position:absolute; transition:border-radius 1s linear 0.5s, top 1s linear 2s, height 1s linear 2s, left 1s linear 4s, width 1s linear 4s; width:200px; height:200px; border:3px solid white; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/aout/03/DSCN5202.JPG'); background-size:cover; background-position:50% 50%; top:520px; left:550px; border-radius:50%;}
    #gen:hover{border-radius:0%; height:563px; top:262px; left:157px; width:1000px;}
    --></style>