Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120921 Commentaire, sous une image | | Coucou, Voici comment faire pour avoir une image et en la survolant avec la souris lire le texte. Créez une page HTMLMettez ce code: - Code:
-
<center><span style= »display: block; width: LARGEUR DE VOTRE IMAGE px; height: HAUTEUR DE VOTRE IMAGE px; background: url(URL DE VOTRE IMAGE); background-repeat: no-repeat; »> <span class= »img »><div style= »padding:10px; »>ECRIRE VOTRE TEXTE ICI</div></span> </span></center>
Dans votre CSS: - Code:
-
.img{ color: #COULEUR DU TEXTE; text-align: justify; font-size: 10px; background-color: #COULEUR DU FOND; width: LARGEUR DE VOTRE IMAGE px; height: HAUTEUR DE VOTRE IMAGE px; position: absolute; display: block; overflow: auto; filter: alpha(opacity=0); opacity: 0; -ms-opacity: 0; -o-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; }
.img:hover{ filter: alpha(opacity=80); opacity: 0.8; -o-opacity: 0.8; -ms-opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; } Amicalement |
| |