Image et texte en hover Comment faire ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image et texte en hover Comment faire ?

Message par misa* le Sam 28 Fév 2015 - 17:13

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://i1181.photobucket.com/albums/x428/xLilissa/gravity/journal%20de%20bord%201_zpslhmaijko.png); /*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://i1181.photobucket.com/albums/x428/xLilissa/gravity/journal%20de%20bord%202_zpsnk1qtqqh.png); /*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&amp;#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&amp;#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&amp;#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

misa*
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 28/02/2015

http://shadowupon-us.forumactif.org/
misa* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image et texte en hover Comment faire ?

Message par MlleAlys le Sam 28 Fév 2015 - 17:31

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 :
Code:
/**journal de  bord**/
 
/*fondue de l'image*/
 
div#image{
    background:url(http://i1181.photobucket.com/albums/x428/xLilissa/gravity/journal%20de%20bord%201_zpslhmaijko.png); /*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://i1181.photobucket.com/albums/x428/xLilissa/gravity/journal%20de%20bord%202_zpsnk1qtqqh.png); /*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
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image et texte en hover Comment faire ?

Message par misa* le Sam 28 Fév 2015 - 17:44

Oh Mon Dieuuu merciiiiiii ♥♥♥ j'ai passer trois heures dessus hier en plus ;www;

En fait s'était simple owo

bref merci merci merci ♥♥♥♥

misa*
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 28/02/2015

http://shadowupon-us.forumactif.org/
misa* a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum