Hiro'. Out of myselfMessages : 46 Date d'inscription : 24/07/2013
| Sujet: 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 |
|
Hiro'. Out of myselfMessages : 46 Date d'inscription : 24/07/2013
| Sujet: Re: Effet hover #2 : Coulisse Dim 29 Déc - 19:38 | |
| |
|