Texte au survol de la souris sur une image

Résolu

Souris
Html

bobenausaure Messages postés 241 Statut Membre -
AB LE GENIE - 21 mai 2014 à 14:52

Bonjour,

J'ai une page web, avec 3 images qui se suivent.
Du simple html :)
Chaque image fait 100*100px.
je souhaiterais qu'au survol de la souris sur une image, un cadre transparent de 30px de hauteur s'affiche en haut de l'image, avec du texte à l'intérieur.
Comment faire, en utilisant uniquement du HTML, CSS et Javascript ?

Merci.

Afficher la suite

4 réponses

Réponse 1 / 4

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
wAxxx Messages postés 455 Statut Membre 46

Bonjour,
Cherches tu par hazard une chose comme celle ci
https://www.queness.com/resources/html/thumbnail/index.html
17
1. tedi19 Messages postés 122 Statut Membre 24
  
  Ouais vraiment trop cool ! Ca fait une éternité que je cherche ça.
  En fait je ne savais pas quoi chercher "image qui disparait et laisse apparaitre du texte en javascript .. jquery... dans google et rien.. "
  
  Merciii
  
  -1
2. AB LE GENIE
  
  vraiment merci vous venez juste de mes sauver
  
  0
Réponse 2 / 4
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention 1 313
Bonsoir,

Si ça avait été afficher un simple cadre de couleur uni, tu aurais pu mettre une propriété hover à tes img, comme ceci :
```
img:hover{
  border: 30px solid black;
}
```
Mais vu que c'est un bloc de texte, je pense que tu n'auras pas le choix et qu'il faudra utiliser javascript.
1
Réponse 3 / 4
bobenausaure Messages postés 241 Statut Membre 16

merci pour vos réponses,
oui, @wAxxx, c'est exactement quelque chose de ce style ! même encore plu que ce que j'espérais ^^
mais le problème, c'est que je ne peux utiliser qu'une seule et unique page qui peut contenir du HTML, CSS et Javascript (c'est pour une appli facebook, j'utilise une appli iframe tab).
0
Réponse 4 / 4
bobenausaure Messages postés 241 Statut Membre 16

en faite j'ai compris, @wAxxx, c'est génial le fonctionnement, merci beaucoup !
0
1. AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention 1 313
  
  Y a-t-il un tuto quelque part pour faire ce que tu voulais faire ?
  Peux-tu mettre ton sujet en résolu ? =)
  
  0
2. bobenausaure Messages postés 241 Statut Membre 16
  
  oui, le tuto est sur le lien de wAxxx ;)
  ok je le passe en résolu :)
  
  0

Texte au survol de la souris sur une image

4 réponses

Discussions similaires

Newsletters