Hover Effekt kombiniert mit erscheinen eines Textes

  • Ich halte mich kurz.

    Ich möchte folgendes erzeugen:

    Dargestellt wird ein 2 teiliges Bild einer Rakete (1 Teil=Raketen Stufe 1, Teil 2= Raketen Stufe 2), hält man den Cursor über die 2. Stufe bewegt sie sich nach links.

    Nun möchte ich, dass dort wo die 2. Stufe "landet" sprich an den Punkt wo sie durch den Hover effekt hin gerückt wurde, dass dort ein Text erscheint und wieder verschwindet wenn auch die 2. Stufe wieder zurück geht. Ich weiß, die Erklärung ist nicht ganz so gut, aber bin halt schlecht darin so etwas zu erklären. Ich hoffe ihr könnt mir helfen.


    LG Nico

  • Ich bin halt anfänger und habe halt ausprobiert ein weißes bild irgendwie vor den text zu machen und so aber hat alles nicht so funktioniert wie ich es wollte.

    und Basti, deins ist mir leider zu kompliziert und verstehe da nicht was ich weg nehmen muss und wie ich da meine zwie bilder und den Text einfügen soll. ich weiß halt auch leider nicht nach was ich googln müsste

  • dann mach doch mal nee skizze was du genau haben willst.

    Du sagst das du bilder hast.

    Ich denke mal das ein Bild die Rakete ist.

    Auf den Bild machst du ein hover Event , oder mit css mit hover.

    Dann kuckst du bei mir iom Code , und suchst @keyframes raus. Da siehst du das die Rakete nach Links bewegt wird.


    An besten fängst du damit an.

    Das einblenden und so weiter kommt dann


    Zum Googeln nimmst du keyframes , transitionen , hover


    Ich gebe dir mal Links

    Hier mit Keyframes https://www.mediaevent.de/css/animation.html unten das bewegliche Auto würde dir helfen

    oder hier transition https://www.mediaevent.de/css/transition.html da ist sogar eine Rakete mit hover die nach oben fliegt.


    Wenn du das mit der Rakete nach deinen vorstellungen eingebaut hast machen wir weiter mit Text einblenden .

    Warum hast du den 2 Bilder ?

  • ich schicke dir ne Skizze, ja

    ich habe 2 Bilder weil ein Bild dir erste Raketen Stufe ist und das andere Bild die zweite Stufe.

    es soll ja so sein das nur die 2, Stufe sich bewegt und die Rakete dann in ihre 2 teile aufgetrennt ist. der text soll dan bei der 2. Stufe erscheinen und eine Info geben.

    ich kann die Bilder auch erst schicken wenn ich von der Schule heim komme