Placer le curseur sur une image
.portail { width: 650px; /* (210 x 3 + margin et padding éventuels) */
margin: 10px auto; padding:0; list-style: none; }
.portail li { width: 210px; height: 160px;
position:relative;
display: block;
float:left;
overflow:hidden;
background: url(/old/images/fond/fond.jpg) ; }
.portail li a { padding:10px; }
.portail li img { width: 210px; height: 160px;
position:absolute; left:0; top:0;
/* un peu de mouvement */
-webkit-transition: top 0.6s ease;
-moz-transition: top 0.6s ease;
-ms-transition: top 0.6s ease;
-o-transition: top 0.6s ease;
transition: top 0.6s ease; }
.portail li:hover img { top:-160px; }
<ul class="portail"> <li><a href="#1">Ceci est un Pavot d'Orient</a> <img src="/old/images/fleurs/fleur1.jpg" alt=""/> </li> <li><a href="#1">Cette fleur est une Rose</a> <img src="/old/images/fleurs/fleur2.jpg" alt=""/> </li> <li><a href="#1">Ceci est un glaïeul jaune</a> <img src="/old/images/fleurs/fleur3.jpg" alt=""/> </li> </ul>