Avatar avec effet slide.
Fermé
nydelia
Messages postés
15
Date d'inscription
lundi 1 juillet 2013
Statut
Membre
Dernière intervention
13 août 2020
-
8 juin 2014 à 08:57
Utilisateur anonyme - 8 juin 2014 à 23:59
Utilisateur anonyme - 8 juin 2014 à 23:59
A voir également:
- Avatar avec effet slide.
- Avatar facebook - Guide
- Effet miroir word - Guide
- Waptrick avatar - Télécharger - TV & Vidéo
- Avatar whatsapp gratuit - Accueil - WhatsApp
- Changer avatar google - Guide
1 réponse
Utilisateur anonyme
8 juin 2014 à 23:58
8 juin 2014 à 23:58
Bonjour.
Le principe est simple. En reprennant l'exemple de CSS3Create, tu as en gros un html comme ça:
Le principe à retenir est moins compliqué: tu dois avoir un premier conteneur (ici, une liste) qui affiche un contenu permanent, et un autre à l'intérieur du premier qui affiche le slide au survol (ici, les div).
Pour afficher les slides au survol (le contenu de div), on utilisera ce code:
Et on utilise celui-là pour cacher les slides quand leurs conteneurs ne sont pas survolés:
Tu auras juste besoin de remplacer les conteneurs (et les sélecteurs du css) par ce dont tu a besoin.
Le principe est simple. En reprennant l'exemple de CSS3Create, tu as en gros un html comme ça:
<ul>
<li>Abcd
<div>slide Abcd</div>
</li>
<li>Efgh
<div>slide Efgh</div>
</li>
</ul>
Le principe à retenir est moins compliqué: tu dois avoir un premier conteneur (ici, une liste) qui affiche un contenu permanent, et un autre à l'intérieur du premier qui affiche le slide au survol (ici, les div).
Pour afficher les slides au survol (le contenu de div), on utilisera ce code:
ul li:hover div{
left:182px;opacity:1;width:276px;
transition:1s left,1s width,1s opacity;
}
Et on utilise celui-là pour cacher les slides quand leurs conteneurs ne sont pas survolés:
ul li div{
left:0px;opacity:0;width:152px;
transition:1s left,1s width,1s opacity;
}
Tu auras juste besoin de remplacer les conteneurs (et les sélecteurs du css) par ce dont tu a besoin.
8 juin 2014 à 23:59