28172 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je voudrais afficher l'attribut 'title' d'images au dessus de celles-ci au moyen du pseudo-élément CSS :after.

Rien ne s'affiche, j'ai beau chercher, je ne trouve pas. Voici mon code :


#galerie .miniature img{
	width: 150px;
	border: 1px solid rgba(47, 85, 165, 0.7);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

#galerie  img:after{
	content: attr(title);
}


Quelqu'un aurait-il un coup de pouce à me donner ? Smiley langue
Bonjour,

La Spec CSS2, content before/after a écrit :
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Du coup, sauf erreur de ma part, il va te falloir passer par une autre méthode, sans doute plus judicieuse...
On veillera également à vérifier la pertinence de l'utilisation de l'attribut title sur ces images (redondance par rapport à l'attribut alt, qui, si mes souvenirs sont bons, est lu en priorité par les lecteurs d'écran)
D'une manière générale, faire attention avec l'utilisation de contenus générés, notamment lorsque ceux-ci ont toute raison de trouver une place pleine et entière dans le code html Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (03 Mar 2012 - 14:57)
Ok, merci. Je commençais finalement à douter que la réalisation soit possible.

Je cherche simplement à afficher l'attribut title, ou alt si c'est plus judicieux, dans le bas des images de ma galerie sur fond gris transparent, comme on le voit régulièrement dans les galeries d'images sur le web. Ce post n'a plus sa place ici, mais savez-vous où je pourrais trouver une aide/tuto pour réaliser cet effet ?

Comme par exemple ici: http://www.css3create.com/Galerie-photo-hover-avec-transition-CSS.

Merci,
Seb Smiley biggrin
Modifié par sebg (03 Mar 2012 - 16:40)
Re,

Quelle est la structure de ta galerie (code html) ?
Il y a moultes façons de faire, et CSS3 apporte également des effets sympa (transition, effets sur le texte, les boites de contenu, etc...
Bonsoir,

Pas de structure définie, je dois encore la créer.

Mon idée était de faire une galerie telle que celle que je lie dans mon message précédent. Il s'agit de photos de personnes.Mon isée initiale était de créer une série de miniatures qui s'agrandiraient en passant dessus (transformation CSS3) et afficheraient le nom des personnes par dessus, dans le bas de l'image. Mais j'avoue que je galère un peu...

Merci !
Modifié par sebg (03 Mar 2012 - 20:07)