BONJOUR TOUT LE MONDE !

Je cherche à faire cet effet depuis un très long moment. Donc je fouille un peu de partout mais je ne trouve pas de tutoriels qui s'y rapportent. J'espère donc que vous pourriez m'aider alors je vous remercie d'avance pour le temps que vous m'accorderez (♥)

J'aimerai créer des onglets (les onglets je sais faire ^^). Cependant, lorsqu'on passe la souris sur la petite image qui sert d'onglet, le contenu s'affiche en se déroulant. Et je ne sais pas comment reproduire cet effet où le contenu se déroule. Je pense que c'est peut être un code de transition que l'on doit mettre dans le css des onglets, peut être un zoom (?), mais je ne suis pas certaine.

http://www.goldheartofficiel.com/forum C'est dans le qeel de ce forum que l'on peut trouver l'effet. Dans les "pierres précieuses", lorsqu'on passe sur les images des pierres, il y a une autre image qui se déroule avec "POP' truc".

Merci beaucoup à ceux qui prendront un peu de leur temps pour m'aider !

Il s'agit plutôt la d'une infobulle, recherche sur le forum il y'as plusieurs tutos/codes et reviens quand tu auras fait quelques tests car nous ne pouvons te fournir le code tout fait

Ah d'accord ! Merci beaucoup alors, je vais chercher !

Je suis désolée du double post ^^

J'ai trouvé ce tutoriel : http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS Et je l'ai mis dans une page html. Tout marche, sauf que j'ai pas le contenu qui vient progressivement. Voici mon forum test où je l'ai mis en page d'accueil : http://afdstest.forumgratuit.fr/

Et voici mon code dans la page html :

Code:

<style>

a{color:#ccc;text-shadow:0 -1px 0 black;text-decoration: none !important;}

a:hover,a:focus{text-decoration: none !important;background:rgba(0,0,0,.4);box-shadow:0 1px 0 rgba(255,255,255,.4);}

a span{position:absolute;margin-top:23px;margin-left:-35px;color:#09c;background:rgba(0,0,0,.9);
padding:15px;border-radius:3px;box-shadow:0 0 2px rgba(0,0,0,.5);transform:scale(0) rotate(-12deg);transition:all .25s;opacity:0;}

a:hover span, a:focus span{transform:scale(1) rotate(0);opacity:1;}

</style>


<p>
    <a href="#">Hover Me!
        <span>I'm a popup...</span>
    </a>
</p>

Normal, car tu dois ajouter des transitions :

Code:

-webkit-transition: all .5s ;
-moz-transition: all .5s ;
-ms-transition: all .5s ;
-o-transition: all .5s ;
transition: all .5s ;

Dans la partie css de ton span ( a span)

Super, ça marche ! Merci beaucoup !
Du coup, je n'ai pas la rotation non plus. J'ai pensé rajouté aussi dans le a span ceci :

Code:

-moz-transform:scale(0) rotate(-12deg);-webkit-transform:scale(0) rotate(-12deg);-o-transform:scale(0) rotate(-12deg);-ms-transform:scale(0) rotate(-12deg);

Mais j'ai du me tromper quelque part parce que ça ne marche pas ^^'

Nope, il faut mettre ça dans la partie a:hover pour que ça marche

Merci beaucoup ! Tout marche bien, merci beaucoup de m'avoir aidé ♥

Hello (:
Vu ton message, je considère ce sujet comme résolu (:
Si toutefois il ne l'était pas, n'hésite pas à envoyer un MP à un modérateur afin qu'il le re-déplace (:
Merci de ta compréhension