Un peu de déco

J’ai voulu, dans mon billet d’hier, ajouter une légende à ma photo, ce que le wiki accepte parfaitement bien — il suffit de rajouter un 5e paramètre dans la balise idoine avec le contenu de la légende souhaitée.

Dans ce cas, Dotclear utiliser l’élément figure avec à l’intérieur un élément img suivi d’un élément figcaption. Jusque là, pas de de souci, ça s’affiche comme ça (en tout cas sur ce blog) :

Figure avec une image et une légende - thème Berlin

C’est propre, ça ne déborde pas, mais je trouve que ça ne fonctionne pas très bien. Le texte de la légende interfère un peu avec la lecture du texte principal, je trouve ça un peu gênant. Du coup j’ai songé que quelques règles CSS pourraient m’aider à régler mon problème.

J’ai un peu regardé ce qu’il se faisait sur le net et finalement j’ai choisi d’afficher les légendes au survol de la souris sur l’image. Ça permet de ne plus polluer la lecture du texte principal et ça donne un petit effet dynamique que j’aime bien.

Voilà les règles que j’ai ajoutées :

figure {
	position: relative;
}
figure figcaption {
	font-size: 0.875em;
	position: absolute;
	width: 100%;
	top: 0;
	color: white;
	padding: 1em;
	background-color: rgba(0,0,0,.5);
	transition: 0.6s ease;
	opacity: 0;
}
figure:hover figcaption {
	opacity: 1;
}

Avec ça, la légende (présente dans l’élément figcaption) disparait de l’affichage standard :

Figure avec une image et une légende masquée - thème Berlin

Et elle est affichée, avec une taille de police légèrement plus petite que le reste de la page, au survol de l’image, sur un fond semi-transparent :

Figure avec une image et une légende affichée au survol - thème Berlin

Et puis j’ai vérifié comment ça fonctionnait sur mon téléphone ; sauf que sur mon téléphone, y’a pas de survol, en tout cas pas encore — en fait y’en a vaguement un dans Safari iOS, à partir du moment où on appuie sur l’image et qu’on fait défiler la page, l’état hover est positionné.

J’ai du coup rajoutée une mediaquerie un peu particulière (et assez récente), qui permet de détecter si l’appareil peut ou pas avoir un état hover :

@media (any-hover: none) {
    figure figcaption {
	    opacity: 1;
	}
}

Dans le cas où aucun dispositif de pointage ne permet le hover, alors je force l’opacité de la légende à 1, ce qui fait qu’elle reste affichée en permanence :

Figure avec une image et une légende affichée en permanence sur téléphone - thème Berlin

Et voilà !

PS : J’ai depuis préfixé mes règles CSS avec #content, histoire de ne pas gêner le plugin magnific-popup qui utilise lui aussi des figures pour gérer son affichage.

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/13058

Haut de page