Légende sur l'image, tuto "Osez html5 et css3"

Bonjour,

Je souhaiterais obtenir un effet semblable aux 4 images sur lesquelles apparait la légende de chacune.
Quelqu'un aurait-il une piste ?
Ce point n'est pas abordé dans le tuto !

TUTO : http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html


Merci beaucoup d'avance
Modifié par froyo (18 Jul 2011 - 14:50)

Regarde le code CSS utilisé sur le site... ?

Il s'agit d'un effet réalisé avec du JQuery
http://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm

Inutile de passer par jQuery pour cet effet tout simple...

Oui Vaxilart j'y ai pensé, sauf que le site a changé depuis...
Avez-vous une piste ? on dirait

Bloc div avec couleur de fond RGBa

En fait l'information qu'il me manque c'est comment le superposer sur l'image... ?

Mon code est en HTML5 avec <figure> et <figcaption>
Mais j'ai un espace récalcitrant très énervant...

<figure  tabindex="0" class="cap-bot"><img src="img/thumb.png" alt="blabla">
  <figcaption><h3><a href="http://www.blabla.fr">Bla bla</a></h3></figcaption>
   </figure>

figure a[href^="http:"] { 
  padding-right: 15px;
  background-image: url(img/arrow2.png);
  background-position: right center;
  background-repeat: no-repeat; 
  text-decoration: none;
}


figure { 
 box-shadow: 1px 1px 13px #999; 
 -moz-box-shadow: 1px 1px 13px #999;  
 -webkit-box-shadow: 1px 1px 13px #999;  
display: block;
position: relative;
float: left;
overflow:hidden;
margin: 0 50px 50px 0;
border: 7px solid #80B3BB;
}

figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding-top:5px;
text-align: center;
width:300px;
height: 35px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

figure:hover figcaption {
opacity: 1;
}

.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}

Au repos


Au survol

Modifié par froyo (20 Jul 2011 - 12:35)

Elle n'est présentement pas superposé sur l'image ?

J'ai testé ton code et ça fonctionne très bien. C'est quoi le problème ?

Pour supprimer ton "espace récalcitrant", utilise display:block; sur ton image et positionne la en absolu par rapport à figcaption