Bewegliche Elemente hinter transparentem Bild verstecken?

Zitat

Ohje..., da brummt der Schädel...

In der Webentwicklung und nicht nur dort ist es ein bewährtes Vorgehen, eine komplexe Aufgabe in kleinere Teilaufgaben zu unterteilen und diese Schritt-für-Schritt abzuarbeiten anstatt durch ein "und, und, und ..." den Überblick zu verlieren.

Zitat

Die vielen Videos be YouTube die ich sah

Youtube ist häufig ein schlechter Lehrer, vor allem wenn es um Layoutfragen geht: Man findet jede Menge veraltete Anleitungen, die z. B. noch float-Layout verwenden. Besser im Forum nachfragen, dort kann man dir empfehlenswerte Seiten nennen, wie z. B. https://wiki.selfhtml.org

Zitat von Jens_M

Ohje..., da brummt der Schädel...

Lass dich nicht verunsichern. Das beste an der Softwareentwicklung ist, wenn sich dieses Gefühl in ein "Ach so geht das, jetzt versteh ich was die mir sagen wollten" auflöst.

Zitat von Jens_M

Wie müsste denn der Befehl aussehen, um z.B. einen sauberen fade von 500ms beim onMouseOver und Out hinzubekommen?

Wie müsste denn der Übergang aussehen?

Hast du schon mal versucht das über CSS zu implementieren?

Zitat

wahrscheinlich kann ich das nur mit größerem aufwand hinbekommen (stichwort opacity und overlay-box) oder sowas in der art.

Nein, wenn Du das auf Hintergrundbilder umstellst, sind es nur wenige Zeilen CSS, das HTML wird viel einfacher und das JS entfällt:

        .nav a {
            background-image: url(images/nav-bg-2.png);
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            padding-left: 10px;
            padding-right: 10px;
        }

        .nav a:hover {
            background-image: url(images/nav-bg-h-2.png);
        }

HTML für einen Link:

                <a classs="nav-link" href="equipment.html" alt="Equipment" id="nav-equipment">
                    EQUIPMENT
                </a>

Funktioniert denn das Ausblenden der Inhalte unter dem Header jetzt bei dir?

Zitat von Jens_M

ich wollte eigentlich einen Bildwechsel mit hover auslösen.

Das Meine ich ja. Wie soll das denn konkret aussehen?

Einen Bildwechsel kann man auf viele verschiedene Arten Realisieren:

• Die Einfachste hat Sempervivum in seinem Post skizziert. Ein einfaches austauschen der Hintergrundbilder.
  Du schreibst allerdings, dass du gerne einen "Fade" von 500ms hättest. Dann ist ein einfaches Austauschen der Bilder nicht das was du willst.
• Etwas komplizierter wäre dann, dass du zwei Elemente (Das Original und ein Pseudoelement) übereinander platzierst, und das obere beim Hover aus- oder einblendest (über opacity, wie du es dir schon gedacht hast.) Wenn du das mit einer Transition versiehst, hast du deinen Fade.
  So einen Fade könnte man auch noch anders hinbekommen:
  • Du könntest auch den Hintergrund als SVG laden und dann per style die Farbe ändern.
  • Eine Weitere Möglichkeit wäre die Farbänderung deines Backgrounds mit CSS-Filtern zu implementieren. Dazu müsste man schauen, ob deine Ziel-Browser das unterstützen.

Man könnte aber auch einen ganz anderen Übergang implementieren, zB einen indem man den 2.Hintergrund von einer Seite aus "reinschiebt".

Es gibt also viele Wege, die dich zum Ziel bringen und wir können dir erst wirklich helfen, wenn wir wissen, wie der Übergang aussehen soll.