Genêt

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>