Avatar avec effet slide.

Bonjour.
Le principe est simple. En reprennant l'exemple de CSS3Create, tu as en gros un html comme ça:

<ul>
      <li>Abcd
            <div>slide Abcd</div>
      </li>
      <li>Efgh
            <div>slide Efgh</div>
      </li>
</ul>

Le principe à retenir est moins compliqué: tu dois avoir un premier conteneur (ici, une liste) qui affiche un contenu permanent, et un autre à l'intérieur du premier qui affiche le slide au survol (ici, les div).
Pour afficher les slides au survol (le contenu de div), on utilisera ce code:

ul li:hover div{
     left:182px;opacity:1;width:276px; 
     transition:1s left,1s width,1s opacity;
}

Et on utilise celui-là pour cacher les slides quand leurs conteneurs ne sont pas survolés:

ul li div{
     left:0px;opacity:0;width:152px; 
     transition:1s left,1s width,1s opacity;
}

Tu auras juste besoin de remplacer les conteneurs (et les sélecteurs du css) par ce dont tu a besoin.