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.

CSS

(à 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>



HTML

 (à 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>