Lyly Admin
Messages : 23 Date d'inscription : 11/03/2013 Age : 24
| Sujet: Transparence image / texte Sam 28 Déc - 22:50 | |
| CSS : - Code:
-
.description { /*nom de la class*/ display: block; /*définit le bloc*/ width: 450px; /*largeur*/ height: 105px; /*hauteur*/ overflow: hidden; /*cache l'overflow*/ bordure:solid 0px #; /*bordure que vous pouvez modifier*/ font-size: 10px; /*taille de la police*/ background-color: #d8efc5; /*couleur du fond*/ color: #000000; /*couleur de la police*/}
.description_contenu { position: absolute; display: block; width: 450px; height: 105px; overflow: auto; background-color: #d8efc5; font-size: 10px; color: #000000; text-align: justify; 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 { /*nom de la class*/ opacity: 0.8; /*intensité de l'opacité*/ -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80); transform: all; /*assure la transition sur IE10*/ -moz-transform: all; /*assure la transition sur mozilla*/ -o-transform: all; /*assure la transition sur opera*/ -htm-transform: all; -webkit-transform: all; /*assure la transition sur chrome et safari*/ transition: 1s; /*durée de la transition*/ -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; /*durée de la transition*/ } HTML : - Code:
-
<div class="description"><span style="display: block; width: 450px; height: 105px; background: url('URL DE L'IMAGE') center center no-repeat;"><span class="description_contenu"><div style="margin-left:15px; margin-right:15px; margin-bottom:10px; margin-top:10px;">votre texte de description au hasard</div></span></span></div> Exemple : votre texte de description au hasard | |
|