Effets sur liens avec CSS
goomba
-
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je voudrais faie un effet sur mes liens comme dans la partie "membres" de ce blog : http://cap-miage.hautetfort.com/
Si quelqu'un serait me dire le code CSS et html qu'il faut ca serait génial parce que je vois pas du tout comment faire.
Merci
Je voudrais faie un effet sur mes liens comme dans la partie "membres" de ce blog : http://cap-miage.hautetfort.com/
Si quelqu'un serait me dire le code CSS et html qu'il faut ca serait génial parce que je vois pas du tout comment faire.
Merci
A voir également:
- Effets sur liens avec CSS
- Partager des photos avec un lien - Guide
- Vérificateur de liens - Guide
- Effets spéciaux sur whatsapp - Accueil - Messagerie instantanée
- Telecharger liens direct - Accueil - Outils
- Ou trouver les liens copiés sur android - Guide
1 réponse
salut,
du parle de l'info-bulle pour les membres ?
j'ai regardé leur code, pas très joli…
je te propose un exemple fais pour une autre question ("lire plus" en blanc).
le principe est une liste de liens contenant chacun un <span> masqué qui sera affiché au survol.
voici une base :
HTML
CSS
du parle de l'info-bulle pour les membres ?
j'ai regardé leur code, pas très joli…
je te propose un exemple fais pour une autre question ("lire plus" en blanc).
le principe est une liste de liens contenant chacun un <span> masqué qui sera affiché au survol.
voici une base :
HTML
<ul> <li><a href="#">Lien 1<span>contenu supplémentaire #1 à afficher.</span></a></li> <li><a href="#">Lien 2<span>contenu supplémentaire #2 à afficher.</span></a></li> <li><a href="#">Lien 3<span>contenu supplémentaire #3 à afficher.</span></a></li> <li><a href="#">Lien 4<span>contenu supplémentaire #4 à afficher.</span></a></li> <li><a href="#">Lien 5<span>contenu supplémentaire #5 à afficher.</span></a></li> </ul>
CSS
ul li a
{
position:relative;
}
ul li a span
{
position:absolute;
display:none;
}
ul li a:hover span
{
display:block;
}
