Image et texte en hover Comment faire ?
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Image et texte en hover Comment faire ?
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://gravity.forumactif.fr/
Description du problème
Bonjour/bonsoir,présentement sur mon forum test j'ai réussit à créé une image en hover au passage de la sourie, mais j'aimerais que les membre puisse écrire leur "journal de bord", mais que le texte n'affiche que simplement aussi qu'au passage de la sourie, donc cacher le texte sous la première image =) Est-ce possible ?
pour vous aider voici le bout de mon Css pour ce que j'essaie de faire;;
- Code:
/**journal de bord**/
/*fondue de l'image*/
div#image{
background:url(http://illiweb.com/fa/pbucket.gif); /*Votre première image ^^*/
background-repeat: no-repeat; /*Empêcher la répétition de l'image*/
width: 616; /*Largeur*/
height:720; /*hauteur*/
}
div#image:hover{
background:url(http://illiweb.com/fa/pbucket.gif); /*les mêmes choses mais quand on passe la souris dessus*/
background-repeat: no-repeat; /*Le meme que l'autre ^^*/
}
#madiv
{
display: hidden;//Pour cacher la div
}
#madiv:hover
{
display: block;//Pour l'afficher lors du survol de la souris
}
et le code que j'ai pour mon message;;
- Code:
<div id="image"><div style="margin: auto ; width: 370px; height: 400px; padding: 80px 5px 5px 5px; font-family: Trebuchet MS; font-size: 11px; line-height: 12px; text-align: justify; color: #000000;"><div id="madiv"><BLOCKQUOTE>Félicitation {USER&#8288;NAME}! Tu est désormais validé. l'équipe de Gravity t'invite à allez lire les intrigues en cours si ce n'a pas encore été fait ! Ensuite nous t'invitons à visité [url=http://gravity.forumactif.fr/f28-relationships]les fiches de liens[/url] pour te trouver des alliés et d'ailleurs n'oublie pas d'y créer ta propre fiche. Sinon tu peux venir faire une demande pour ton logement & ton métier juste [url=http://gravity.forumactif.fr/f25-request]ici[/url]! N'oublie pas de passer dire un petit bonjour au reste de ton clan par [url=METTRE LE SOUS_FORUM PRIVe AU CLAN ICI]ici[/url] ou te joindre à la communauté de Gravity en participants au [url=http://gravity.forumactif.fr/t58-general-flood]flood général[/url]! N'hésite pas à contacter les administrateurs du forum en cas de problème, étant de nationalités différentes, elles couvrent tous les fuseaux horaires!
Pour les Voïn contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=8]Vëlk Elna[/url], pour les Shōkan & les Arkers contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=4]Murakami Ran[/url], pour les Berkana contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=2]Kaem Ehli[/url] et pour ce qui est des Invaders & les nicatverən contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=3]Jjang Lee Hee[/url]! Sur ce bon jeu
Félicitation {USER&#8288;NAME}! Tu est désormais validé. l'équipe de Gravity t'invite à allez lire les intrigues en cours si ce n'a pas encore été fait ! Ensuite nous t'invitons à visité [url=http://gravity.forumactif.fr/f28-relationships]les fiches de liens[/url] pour te trouver des alliés et d'ailleurs n'oublie pas d'y créer ta propre fiche. Sinon tu peux venir faire une demande pour ton logement & ton métier juste [url=http://gravity.forumactif.fr/f25-request]ici[/url]! N'oublie pas de passer dire un petit bonjour au reste de ton clan par [url=METTRE LE SOUS_FORUM PRIVe AU CLAN ICI]ici[/url] ou te joindre à la communauté de Gravity en participants au [url=http://gravity.forumactif.fr/t58-general-flood]flood général[/url]! N'hésite pas à contacter les administrateurs du forum en cas de problème, étant de nationalités différentes, elles couvrent tous les fuseaux horaires!
Pour les Voïn contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=8]Vëlk Elna[/url], pour les Shōkan & les Arkers contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=4]Murakami Ran[/url], pour les Berkana contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=2]Kaem Ehli[/url] et pour ce qui est des Invaders & les nicatverən contactez [url=http://gravity.forumactif.fr/profile?mode=email&u=3]Jjang Lee Hee[/url]! Sur ce bon jeuFélicitation {USER&#8288;NAME}! Tu est désormais validé. l'équipe de Gravity t'invite à allez lire les intrigues en cours si ce n'a pas encore été fait ! Ensuite nous t'invitons à visité [url=http://gravity.forumactif.fr/f28-relationships]les fiches de liens[/url] pour te trouver des alliés et d'ailleurs n'oublie pas d'y créer ta propre fiche. Sinon tu peux venir faire une demande pour ton logement & ton métier juste [url=http://gravity.forumactif.fr/f25-request]ici[/url]! N'oublie pas de passer dire un petit bonjour au reste de ton clan par [url=METTRE LE SOUS_FORUM PRIVe AU CLAN ICI]ici[/url] ou te joindre à la communauté de Gravity en participants au [url=http://gravity.forumactif.fr/t58-general-flood]flood général[/url]! N'hésite pas à contacter les administrateurs du forum en cas de problème, étant de nationalités différentes, elles couvrent tous les fuseaux horaires!
</BLOCKQUOTE></div></div></div></div>
Dernière édition par misa* le Sam 28 Fév 2015 - 17:44, édité 1 fois
Re: Image et texte en hover Comment faire ?
Bonjour,
modifiez
display: hidden;//Pour cacher la div
en
display: none; /*Pour cacher la div*/
puis
#madiv:hover
en
#image:hover #madiv
et
//Pour l'afficher lors du survol de la souris sur le bloc image
en
/*Pour l'afficher lors du survol de la souris sur le bloc image*/
ce qui donne :
modifiez
display: hidden;//Pour cacher la div
en
display: none; /*Pour cacher la div*/
puis
#madiv:hover
en
#image:hover #madiv
et
//Pour l'afficher lors du survol de la souris sur le bloc image
en
/*Pour l'afficher lors du survol de la souris sur le bloc image*/
ce qui donne :
- Code:
/**journal de bord**/
/*fondue de l'image*/
div#image{
background:url(http://illiweb.com/fa/pbucket.gif); /*Votre première image ^^*/
background-repeat: no-repeat; /*Empêcher la répétition de l'image*/
width: 616; /*Largeur*/
height:720; /*hauteur*/
}
div#image:hover{
background:url(http://illiweb.com/fa/pbucket.gif); /*les mêmes choses mais quand on passe la souris dessus*/
background-repeat: no-repeat; /*Le meme que l'autre ^^*/
}
#madiv {
display: none; /*Pour cacher la div*/
}
#image:hover #madiv {
display: block; /*Pour l'afficher lors du survol de la souris sur le bloc image*/
}
Dernière édition par MlleAlys le Sam 28 Fév 2015 - 17:47, édité 2 fois
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Image et texte en hover Comment faire ?
Oh Mon Dieuuu merciiiiiii ♥♥♥ j'ai passer trois heures dessus hier en plus ;www;
En fait s'était simple owo
bref merci merci merci ♥♥♥♥
En fait s'était simple owo
bref merci merci merci ♥♥♥♥
Sujets similaires
» Comment faire un texte par dessus l'image de fond ?
» Faire apparaître du texte au survol de l'image de la catégorie
» Faire glisser une image pour faire apparaitre un texte.
» comment faire pour faire défiler une image dans le rang
» Comment faire clignoter un texte ?
» Faire apparaître du texte au survol de l'image de la catégorie
» Faire glisser une image pour faire apparaitre un texte.
» comment faire pour faire défiler une image dans le rang
» Comment faire clignoter un texte ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum