Partagez | .
 

 Effet hover #2 : Coulisse

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

avatar

Out of myself


Messages : 46
Date d'inscription : 24/07/2013



MessageSujet: Effet hover #2 : Coulisse   Dim 29 Sep - 14:32

CSS :
Code:
.autour_avatar
{
  width: 200px; /* Mettre la largeur de votre avatar */
  height: 400px; /* Mettre la hauteur de votre avatar */
  overflow: hidden; /* Permet de cacher ce qui dépassera de la div */
  position: relative;
  top: 0;
  left: 0;
}
.avatar_image
{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.avatar_infos
{
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  padding-left: 2%;
  padding-right: 2%;
  height: 100%;
  z-index: 100; /* Ne pas modifier */
  opacity: 0; /* Pour un effet d'apparition progressive. Si on veut juste un coulissement, mettre 100 à l'opacité. */
  margin-top: 400px; /* La marge extérieure haute doit être de la même taille que la hauteur de l'avatar. Cela permet de placer cette div juste au-dessous de l'avatar. */
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.autour_avatar:hover > .avatar_infos
{
  /* Si vous avez mis l'opacité à 100 pour avoir simplement un effet coulissant, supprimez les 4 lignes ci-dessous. */
  filter: alpha(opacity=85);
  -moz-opacity: 0.85;
  -khtml-opacity: 0.85;
  opacity: 0.85;
  margin-top: 0px; /* Ne pas modifier. Cela permet de supprimer la marge au-dessus de la div et ainsi, elle ira se placer sur l'avatar ! */
}
HTML
Code:
<div class="autour_avatar"><div class="avatar_image" style="background-image:url(http://images.doctissimo.fr/1/divers/images-chipie/photo/hd/3684761368/356005938f/images-chipie-ange-dechu-big.jpg);"></div><div class="avatar_infos">Voili, voilou.</div></div>
Rendu

Voili, voilou.

.........................................................

Hiro'
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://espaceperso.danskforum.net

avatar

Out of myself


Messages : 46
Date d'inscription : 24/07/2013



MessageSujet: Re: Effet hover #2 : Coulisse   Dim 29 Déc - 19:38

Voili, voilou.

.........................................................

Hiro'
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://espaceperso.danskforum.net
 

Effet hover #2 : Coulisse

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Effet hover sur les sous-forums, la description et les derniers messages (Catégories)
» Effet hover persistant
» Effet de transition (hover) avec la barre de navigation
» Tiroir automatique en coulisse
» Tutoriel effet jet d'eau

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Lee & Lou :: Tests :: Trucs et astuces-