Essayons de rajouter quelques animations, sans toucher à l'image exemple, mais en en changeant le nom pour ne pas perturber cet article:
<p class="untel" style="width: 60px; height: 60px; float: left; text-align: center; border: 2px solid black;"><br />
    Notre exemple
  </p>
<style type="text/css"><!--
.untel {
background-color:pink;
...-webkit-transition: all 4s ease-in-out;
   -moz-transition: all 4s ease-in-out;
}
.untel:hover {
background-color: lightgreen;
...   -webkit-transform: translate(60px, 70px) scale(3) ;
   -moz-transform: translate(60px, 70px) scale(3);
--></style>

Notre exemple

    Rajoutons autre chose: la forme et l'ombre.
    Concernant la forme, vous remarquerez qu'elle n'est pas indiquée à l'origine car elle est dans le paragraphe de l'adresse de notre exemple; sinon, le principe est:  élément de départ dans la première partie et élément d'arrivée dans le deuxième (survol)
<style type="text/css"><!--
.chose {
    background-color:pink;
    box-shadow:-2px -2px 4px grey;
   -webkit-transition: all 4s ease-in-out;
   -moz-transition: all 4s ease-in-out;
}
.chose:hover {
    border-radius: 31px;
    box-shadow:-4px -4px 6px black;
    background-color: lightgreen;
   -webkit-transform: translate(60px, 70px) scale(3) ;
   -moz-transform: translate(60px, 70px) scale(3);
}
--></style>
<p class="chose" style="width: 60px; height: 60px; float: left; text-align: center; border: 2px solid black; margin: 20px 0px 0px 0px;">
      <br />
      Notre exemple
    </p>

Notre exemple