Texte sur image au passage de la souris

FORUM D’ENTRAIDE INFORMATIQUE (FEI)
Site d’assistance et de sécurité informatique

Règles du forum : Entraide concernant la programmation informatique en général, tous langages : recherche ou correction d'un code ou d'une fonction, aide à la réalisation d'un projet...
Pour la programmation web (HTML, CSS, PHP, MySQL...), il est conseillé de s'orienter dans le forum Webmastering.
Merci de lire et de respecter la charte générale du forum.

2 messages

2 messages

Répondre

Texte sur image au passage de la souris#170847

par Melbassa - mar. 27 oct. 2015 16:57

- mar. 27 oct. 2015 16:57 #170847

Bonjour,
Je vous donne un exemple de ce que j'aimerais faire http://www.mexique-voyages.com/ vous avez des photos du Mexique par thème d'activité avec un texte qui apparaît quand on passe la souris sur chacune des photos.
J'aimerais faire ça sur mon site sous wordpress avec du html de préférence.
Merci pour votre aide.

Re: Texte sur image au passage de la souris#170961

par KeRR_@ - ven. 30 oct. 2015 17:30

- ven. 30 oct. 2015 17:30 #170961

Bonjour Melbassa

Voilà un petit code pour ce que vous voulez afficher

Code : Tout sélectionner

		
<!DOCTYPE html PUBLIC>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <title>My picture</title>
	<style type="text/css">
	    div {
                width:200px;
                 height:190px;
                border: 1px solid black; 
                  }

        	.sea {
                     background-image: url("../Desktop/sport.png");
                      background-color:  #8C73FF;
                     }
	    div .parag{ 
                    display:  none;   
                   background-color: black;   
                   opacity:  0.6;
                   }
.sea:hover .parag{ display: block;  color:  white; }
               p {
             margin-left:  15px;
              font-family: Tahoma,Geneva,sans-serif;  
              color: #E68A00; 
               }
           span { 
           font-family: inherit; 
            color: #ffffff;
           }    
	</style>
	<head>
	<body>	
           <div class="sea">
               <div class="parag"><p><span>SPORTS & AVENTURE</span><br />
               Votre text ici</p></div>
	</div>	</body>
</html>

KeRR_@.