Premièrement le html

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">

Code:

<div id="englob">
  <div class="imgp">{postrow.displayed.POSTER_AVATAR}</div>
  <div class="infosp">
  {postrow.displayed.PROFILE_IMG} <br/>
  {postrow.displayed.PM_IMG} <br/>
  {postrow.displayed.EMAIL_IMG} <br/>
  {postrow.displayed.contact_field.CONTENT} <br/>
  {postrow.displayed.ONLINE_IMG}
  </div>
</div>

Code:

{postrow.displayed.POSTER_AVATAR}

Code:

{postrow.displayed.PROFILE_IMG}

Code:

{postrow.displayed.PM_IMG}

Code:

{postrow.displayed.EMAIL_IMG}

Code:

{postrow.displayed.contact_field.CONTENT}

Code:

{postrow.displayed.ONLINE_IMG}

Maintenant passons au css

Code:

/* Code par Hiro pour CSSACTIF
  Merci de ne pas supprimer cette mention
  (http://www.css-actif.com) */

#englob { /* Encadrement global des 2 divs */
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red; /* La vilaine bordure rouge */
    overflow:hidden; /* Permet de cacher ce qui dépasse */
}

.imgp {
    background:blue; /* le bg  de la div qui contient l'avatar */
    position:absolute; /* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
    z-index:1;/* La position par rapport à l'autre div qui contient les infos */
    -webkit-transition:all 0.5s;/* Laissez comme ceci */
    -moz-transition:all 0.5s;/* Laissez comme ceci */
    -o-transition:all 0.5s;/* Laissez comme ceci */
    -ms-transition:all 0.5s;/* Laissez comme ceci */
    transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .imgp {
    margin-top:200px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

.infosp {
    background:green; /* le bg  de la div qui contient les infos*/
    position:absolute;/* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
    z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
    opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */
    margin-left:-200px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */
    -webkit-transition:all 0.5s;/* Laissez comme ceci */
    -moz-transition:all 0.5s;/* Laissez comme ceci */
    -o-transition:all 0.5s;/* Laissez comme ceci */
    -ms-transition:all 0.5s;/* Laissez comme ceci */
    transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .infosp {
  opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
  margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
}

Et donc, si vous testez, vous devriez avoir un joli petit effet à la CSSActif !, mais si vous testez sur IE vous verrez qu'il n'y a pas de glissement, normal car les transitions ne marcheront qu'à partir de la prochaine version.