(à placer dans le head) chaque ligne est commentée pour mieux en comprendre le principe
<style type="text/css"> /* image coulissante vers le bas*//*<![CDATA[*/
.imagepluscontainer{ /* conteneur principal d'image */position: relative;z-index: 1;}
.imagepluscontainer img{ /* CSS pour l'image dans le conteneur */position: relative;z-index: 2;-moz-transition: all 0.5s ease; /* Permet la transition CSS3 sur tous les appuis verticaux */-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.imagepluscontainer:hover img{ /* CSS pour l'image quand la souris passe au-dessus du contenu principal */-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);-moz-transform: scale(1.05, 1.05);-webkit-transform: scale(1.05, 1.05);-ms-transform: scale(1.05, 1.05);-o-transform: scale(1.05, 1.05);transform: scale(1.05, 1.05);}
.imagepluscontainer div.desc{ /* CSS pour la division de descente de chaque image. */position: absolute;width: 90%;z-index: 1; /* Placez le z-index à égalité avec l'image, ainsi elle est cachée sous elle */bottom: 0; /* La position de défaut de la division de descente est le fond du conteneur, et glissent ainsi jusqu'au bas */left: 5px;padding: 8px;background: rgba(0, 0, 0, 0.8); /* noir background avec 80% d'opacité */color: white;-moz-border-radius: 0 0 8px 8px; /* CSS3 angles arrondis */-webkit-border-radius: 0 0 8px 8px;border-radius: 0 0 8px 8px;opacity: 0; /* Set initial opacity to 0 */-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 ombres */-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);-moz-transition: all 0.5s ease 0.5s; /* Permet la transition CSS3 sur la division de descente. La valeur 0.5s finale est le retard avant que l'animation commence */-webkit-transition: all 0.5s ease 0.5s;-o-transition: all 0.5s ease 0.5s;-ms-transition: all 0.5s ease 0.5s;transition: all 0.5s ease 0.5s;}
.imagepluscontainer div.desc a{color: white;}
.imagepluscontainer:hover div.desc{ /* CSS pour la division de descente quand la souris passe au-dessus du conteneur principal */-moz-transform: translate(0, 100%);-webkit-transform: translate(0, 100%);-ms-transform: translate(0, 100%);-o-transform: translate(0, 100%);transform: translate(0, 100%);opacity:1; /* Reveal desc DIV fully */}/*]]>*/</style>
(à mettre dans un widget/html)
<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2"> <img src="http://www.aht.li/1994152/Stade.jpg" alt="" /> <div class="desc"> Pouvant accueillir 50.000 spectateurs, le Colisée a été utilisé pour les combats de gladiateurs et autres spectacles publics tels que les exécutions. </div></div>