:hover opacity

  • Hallo zusammen,


    auf meiner Webseite sollen Bilder beim Hovern die Transparenz ändern (Standardwert ist 0.7, :hover ist 1). Das hat auch soweit alles gut geklappt.

    Ich habe jetzt aber folgendes Problem: Sobald mein Hauptmenü den Bereich mit den Fotos erreicht, wird es auch transparent. Nur wenn ich über ein Foto hover wird auch der Teil des Menüs, das dieses Foto berührt, wieder normal sichtbar.

    Ich habe es alternativ auch schon mit der CSS-Eigenschaft filter probiert, aber das hat auch ungewollte Nebenerscheinungen erzeugt (das Hauptmenü war plötzlich hinter den Bildern und nur noch bruchstückhaft zwischen den Bildern erkennbar).

    Ich würde mich freuen, wenn mir jemand helfen kann. Ich kann gerne bei Bedarf auch Screenshots/Code schicken.


    Viele Grüße

    Kilian

  • Hallo Kilian, der beschriebene Effekt kommt dadurch zu Stande, dass die Bilder die Navigation überdecken. Weil sie transparent sind, scheint die Navigation durch. Warum dann aber nach abgeschlossener Animation des Bildes die Navigation auf einmal in den Vordergrund rückt, ist mir nicht klar. Eines der Mysterien von CSS? Auf jeden Fall konnte ich im HTML-Inspektor die beiden Navs dauerhaft in den Vordergrund bringen, indem ich ihnen einen hohen z-index verpasst habe, z. B. z-index: 999;

    BTW: Überwiegend bist Du mit deinem CSS auf dem neuesten Stand und verwendest Grid und Flex. So weit schon mal sehr gut. In der mobilen Navigation finde ich jedoch einige floats und das trübt das Bild ein wenig. Vielleicht diese auch noch durch Flex oder Grid ersetzen?

  • Ah perfekt. Mit dem z-index hatte ich mich bisher noch nicht beschäftigt. Aber ich hatte vorhin tatsächlich auch das Thema, dass meine Hauptnavigation auf einmal komplett von anderem Inhalt überdeckt war und das konnte ich so jetzt auch lösen. Also vielen Dank!


    Ich hab nen Online-Kurs zu CSS und HTML gemacht und da wurden floats als gängig dargestellt. Aber jetzt bin ich schlauer und werde es dementsprechend ändern. Auch für diesen Tipp vielen Dank :)

  • Zitat

    Ich hab nen Online-Kurs zu CSS und HTML gemacht und da wurden floats als gängig dargestellt.

    Das ist nichts ungewöhnliches, es geistern jede Menge veraltete Anleitungen, Tutorials etc. im Netz herum. Besser auf die bewährten Quellen wie Selfhtml und MDN setzen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!