Partagez | .
 

 Effet hover #1

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 #1   Mer 28 Aoû - 15:06

Note : Pour un fond en 200*400.

CSS :
Code:
.description
{
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
}
.description_contenu
{
  position: absolute;
  width: 200px;
  height: 400px;
  overflow: 400px;
  background-color: #EFE9DD;
  font-size: 11.5px;
  font-family:'Georgia';
  color: #3E352E;
  text-align: justify;
  padding:0px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
HTML :

Code:
<div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/bDu6963.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;">Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici.</div></div></div></div>
Rendu :

Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici - Contenu ici.


Dernière édition par Lou le Jeu 29 Aoû - 17:46, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://espaceperso.danskforum.net
 

Effet hover #1

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)
» Tutoriel effet jet d'eau
» Effet d'eau
» Tableau de partenaires avec effet Zoom
» Effet Typographie avec Photoshop CS4

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