Style porte de garage

Placer le curseur sur une image


Code css:
.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; }
Code html:
<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>