Question sur les infobulles/transition

Bonjour,
Je dois créer un site pour mes cours de web design qu'on a commencé ce semestre à la fac, et j'essaye de faire le tutoriel sur les infobulles dans les transitions,
http://www.alsacreations.com/xmedia/tuto/exemples/transitions/infobulles.html

Mais je ne parviens pas à comprendre le code, j'ai utilisé firebug pour voir les différentes propriétés, (par ailleurs, je ne trouve pas comment voir les propriétés en hover/active ou focus avec firebug)
Et je voulais savoir si quelqu'un pouvait m'expliquer?
Pour l'instant sur la page mes photos apparaissent dans le bloc gris comme sur le lien, mais la partie "info: loreum..." est caché derrière les images et ne veut pas passer devant..

Merci d'avance !

Bonjour,

Le lien ne fonctionne pas. J'imagine que la page recherchée est celle-ci : CSS transitions.

Je ne crois pas que l'on puisse voir le code à l'inspection en :hover, :focus ou :active. Edit du 25/05/2015 : depuis peu (je n'avais pas vu) ces états sont reconnus par Chrome (Firefox doit suivre sans doute, mais je ne l'utilise pas) :

http://forum.alsacreations.com/upload/35007-chromeinsp.jpg

Sinon, le code est disponible dans le code source de la page.

Le code joue sur le margin-top, avec une valeur négative quand la souris est en position :hover lié à un effet de transition :

p {
       /* ici, le début du code pour cet élément... */
    	transition: margin-top .2s ease-out; /* l'effet de transition est géré ici (à partir de 0 par défaut puisque la marge n'est pas définit pour cet élément). Ce code est important à placer ici, et non sur le :hover, si l'on veut aussi bénéficier de la transition au retrait de la souris */
}

li:hover p {
    	margin-top:-40px; /* Le margin-top passe à 40px en :hover */
}

Modifié par Olivier C (25 May 2015 - 07:29)