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>