Vous aimerez savoir comment faire pour mettre un texte lors d’un survol d’une image ? J’ai trouvé la solution pour vous ! Ce code fonctionne aussi sur les forums “Forumactif”.

♦ Rendez-vous dans un éditeur de texte en format HTML.
♦ Insérez ce code en modifiant les MAJUSCULES par ce qui vous convient, puis validez :

 

<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>

 

♦ Dirigez-vous maintenant dans Affichages > Couleurs > Général > Feuille de Style CSS pour les forums “ForumActif” ou votre fichier style.css de votre site.
♦ Installez ce code en modifiant les caractères en majuscule :

.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;
}

♦ Et c’est terminé !

© By Shaynee

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *