Hiro'. Out of myselfMessages : 46 Date d'inscription : 24/07/2013
| Sujet: 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 |
|