Texte qui apparait lorsque le curseur survole une image.

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

Résolu Texte qui apparait lorsque le curseur survole une image.

Message par Carrie. le Mar 7 Avr 2015 - 22:13

Bonjour, bonsoir à tous ! Very Happy

Voilà bien que d'ordinaire j'essaye de me débrouiller toute seule, là je n'arrive vraiment pas à obtenir l'effet que je veux. Je suis proche, mais ce n'est pas parfait. Bref, tout d'abord, j'espère poster dans la bonne session & je tiens à préciser qu'avant de me lancer j'ai fait des recherches, mais je n'ai rien trouvé de concluant, bien que j'ai à peu près (à mon sens) tout essayé.

Donc merci à vous pour l'aide que vous allez m'apporter, ce que je demande ne devrait pas être trop dur. En effet, je cherche à reproduire l'effet réalisé sur ce forum : http://etpuiszut.fr-bb.com/ & plus particulièrement quand on passe la souris sur l'image des derniers messages, y a le nombre de sujet et de message qui s'affiche.

J'ai donc commencé à chercher par moi-même les codes mais il subsiste quelques différences : bien que l'image coulisse, elle semble sortir du rond et non pas "être à l'intérieur du rond" , vous pouvez voir par vous même à l'adresse mise en hide .

Je vous donne donc également mon CSS en hide ainsi que le bout de template :



Encore une fois merci à vous par avance, j'espère ne rien avoir oublié, je reste à votre entière disposition s'il manque quelque chose. Bonne soirée !


Dernière édition par Carrie. le Mar 7 Avr 2015 - 23:44, édité 1 fois

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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

Résolu Re: Texte qui apparait lorsque le curseur survole une image.

Message par R-max le Mar 7 Avr 2015 - 23:20

bonsoir je répond pour voir ^^

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte qui apparait lorsque le curseur survole une image.

Message par MlleAlys le Mar 7 Avr 2015 - 23:25

Bonjour,

Vous y êtes presque en effet ! Very Happy
L'effet "sur" le rond et non pas "dans" le rond vient du fait que les infos sont visibles avant le rond, parce que votre div .imgmsg est de forme carrée.
Retrouvez le code suivant dans votre css :

et ajoutez border-radius: 50%; pour lui donner une forme ronde, ce qui donne :

Le dernier décalage qui reste est dû à votre image qui a un bord transparent, et donc la "partie visible" de l'image fait moins de 55px, recadrez et redimensionnez l'image à 55px (ou bien recadrez l'image et redimensionnez les div en fonction de la taille de cette denrière) pour finaliser ^^

MlleAlys
+ Hyperactif +

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

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

Résolu Re: Texte qui apparait lorsque le curseur survole une image.

Message par Carrie. le Mar 7 Avr 2015 - 23:43

Oh génial Very Happy
Merci beaucoup pour votre aide I love you
C'est parfait !!!
Je peux mettre en résolu ! ::fete::

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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