Animation erstellen - Bild zuerst mittig, anschließend "fließt" Text heraus?

Hallo Community, ich denke ihr habt am Titel schon ungefähr gelesen worum es geht. Ich möchte gerne eine Animation erstellen. Am besten eine per CSS, damit ich sie in allen Webseiten verwenden kann. In der Animation soll zuerst mein Logo (also ein Bild) zusehen sein. Anschließend rückt das Bild ein Stück nach Rechts und nach Links hin "fließt" ein Text neben dem Bild ein. Es soll dann letztendlich "Producted by [Bild]" dastehen.

Wie mache ich das? Die Animation soll nur beim mit der Maus drüber schweben angezeigt werden! Also wie :hover bei CSS.

Viele Grüße!

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

tekreuzer

11.12.2021, 18:47

Da gibt es 1000 Herangehensweisen.

Eine habe ich dir mal auf die Schnelle gebaut:

HTML:

<div class="logo-text-container">
  <img class="logo" src="https://via.placeholder.com/400x150.png?text=Logo"/>
  <span class="text">Produced by</span>
</div>

CSS:

.logo-text-container{
  display: block;
  position: relative;
  height: 150px;
  width: 300px;
}

.text{
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all .3s;
}

.logo{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transition: all .3s;
}

.logo-text-container:hover .logo{
    left: 66.6%;
}

.logo-text-container:hover .text{
    position: absolute;
    top: 50%;
    left: 33.3%;
}

Hier kannst du es testen:

https://jsfiddle.net/3d8tpnLv/55/

speedwanted55

Fragesteller

11.12.2021, 19:02

Danke! Ich werde noch einige Sachen wie Farben, Größe und so ändern, dennoch ist es das was ich gesucht habe! Danke dir!!!

tekreuzer

11.12.2021, 19:04

@speedwanted55

Kein Problem. Ich habe einen Haufen Arbeit vor mir und das war ne schöne Fingerübung/Ablenkung. Also...danke dir :)

Nochmal eine Kleinigkeit geändert:
https://jsfiddle.net/ag85yzsc/

speedwanted55

Fragesteller

11.12.2021, 23:37

@tekreuzer

Gucke ich mir gleich an. Nun ist es so das mein Logo weiß ist. Man sieht also die Schrift durch das Logo hindurch. Kann man das noch ändern?

speedwanted55

Fragesteller

11.12.2021, 23:43

@speedwanted55

Ich schicke dir mal mein Logo. Nimm das bitte und füge es ein. Die Schrift sollte blau , fett und in der Schritart Arial sein. Die Schrift soll mittig aus dem Logo heraus kommen. Dann wirst du auch sehen was ich mit meinem letzten Kommentar meinte.

Hier mein Logo: https://em-cloud-solutions.de/alt/logos/logo_small.png

kannste ja mal probieren. Wäre super nett :)

speedwanted55

Fragesteller

12.12.2021, 22:31

@tekreuzer

Noch da? ^^

tekreuzer

17.12.2021, 20:22

@speedwanted55

gib deinem bild einen weißen hintergrund

speedwanted55

Fragesteller

17.12.2021, 20:40

@tekreuzer

Hab ich... Schau es dir Mal an

tekreuzer

17.12.2021, 20:41

@speedwanted55

wo?

speedwanted55

Fragesteller

18.12.2021, 16:57

@tekreuzer

Habs, danke dir

tekreuzer

11.12.2021, 19:13

war nicht mittig. Jetzt aber:
https://jsfiddle.net/672av3Lk/14/

Steffile

11.12.2021, 08:21

Google nach css transformation:translate

Z.B. https://www.the-art-of-web.com/css/css-animation/

https://www.w3schools.com/css/css3_2dtransforms.asp

Hallo!

Ich habe eine CSS-Animation, die bei Hover ein Element vergrößert. Wenn man die Maus wegbewegt ändert sich die Größe direkt ohne Animation wieder zurück. Wie kann man die Animation beim Webbewegen des Cursers wieder rückgängig abspielen lassen?

...zur Frage

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zur Frage

CSS Hover Animation "einmalig"?

Hallo, ich möchte eine :hover transition so einstellen, dass wenn sie einmal getriggert wurde nicht mehr gestoppt wird einfach bis zum Ende läuft und dann so bleibt. Wie realisiere ich das am einfachsten? LG

...zur Frage

Mouseover Bilder Zoom mit HTML CSS Hover?

Hallo.

Ich möchte gerne wenn man auf das Bild geht mit der Maus, dass automatisch reingezoomt wird. Wie das geht und skaliert wird weiß ich. Da sich das Bild aber enorm vergrößern soll nimmt es die ganze Seite ein. Nun möchte ich, dass diese enorme Vergrößerung innerhalb eines Rahmens stattfindet, den ich definiere.

Ich probiere schon ein div drum herum zu legen und dies zu definieren, aber es klappt nicht. Hat schon mal jemand sowas gemacht und Beispielcode?

Anja

...zur Frage

Hover-Effekt erstellen in html, css und js?

Hallo,

ich würde gerne einen Hover-Effekt erzeugen, wenn man sich mit dem Cursor über einem gewissen Bereich befindet (<Area>). Nun ist es so, dass sich die Bereiche in einem Bild (Bild ist unten) befinden, welches ich mit <map> und <area> in verschiedene Bereiche unterteilt habe (für jeden Agenten ein Bereich).

Ich habe es bis jetzt nur geschafft, dass das ganze Bild einen Hover-Effekt hatte, wenn man mit dem Cursor irgendeinen beliebigen Bereich überquert hat...

Danke schonmal im Voraus!

...zur Frage

HTML Akkordeon Problem?

Hallo

Ich habe ein Problem mit dem CSS:
- Ich möchte den HOVER des Buttons in dieser Farbe: #2C6194 und Text nicht blau
- und wäre es leicht das responsive anzupassen?
Bild oben und Text unten auf dem mobile?
Hier der Quelltext: HIER

Danke für die Mithilfe! Komme leider nicht weiter....

...zur Frage

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zur Frage

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zur Frage

CSS3-Keyframe-Aninationen bei mouseout rückgängig machen?

Hi, ich habe diese Keyframe-Animationen in CSS gemacht:

nav:hover #strich1 {
    animation: strich1 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich2 {
    animation: strich2 0.5s ease-out 0s 1 normal forwards;
}
nav:hover #strich3 {
    animation: strich3 0.5s ease-out 0s 1 normal forwards;
}
@keyframes strich1 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(45deg);
        width: 30px;
    }
}
@keyframes strich2 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes strich3 {
    from {
        transform: rotate(0deg);
        width: 24px;
    }
    to {
        transform: rotate(-45deg);
        width: 30px;
    }
}

möchte ihr allerdings auch, dass sie sobald die Maus den Navigationsbereich(<nav>) wieder verlässt die Animationen wieder rückwärts ablaufen, weiß allerdings noch nicht so ganz wie. Ich habe es bereits so versucht:

nav:not(:hover) #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

und so:

nav #strich1 {
    animation: strich1 0.5s ease-out 0s 1 reverse forwards;
}
...

Hat allerdings beides nicht den gewünschten Effekt gebracht. Wisst ihr wie ich das machen könnte? Gibt es vllt eine Art Gegenteil-Pseudoklasse zu :hover? Wisst ihr da Abhilfe? Ansonsten hatte ich mir noch überlegt mit JavaScript nach dem feuern des mouseout events die Animation rückgängig zu machen wenn das mit CSS gar nicht geht.

...zur Frage

CSS Text Mittig aber linksbündig?

Hey, ich möchte in CSS einen Text in der Mitte haben aber auch linksbündig. (Die Anfänge sollten auf der roten Linie sein.)

...zur Frage

mit :hover Text hervorheben?

Hi, ich will, dass zum Beispiel ein Link, wenn man über ihn fährt mit der maus größer und unterstrichen wird. Das geht ja zum Beispeil mit

a:hover {
  text-decoration: underline;
  font-size: 200%;
}

Das funktioniert auch gut, ich will aber dass dabei eine kleine Animation passiert. Der Strich soll sich von links nach rechts "aufbauen" und die Schrift soll langsam größer werden. Wie kann man das mit nur css machen?

...zur Frage

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Javascript E-Mail senden?

Ich versuch ein Kontaktformular zu erstellen.

Mit HTML CSS und JAVASCRIPT.

Im Internet bzw. youtube findet man Tutorials, bei den das Formular zuerst an einem Websever gesendet wird, und diese verschickt dieses Formular an meine E-Mail.

Gibt es eine Möglichkeit, dass auch ohne einen Webserver zu machen? Kenne mich noch nicht so gut aus.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen