Widget LinkBox und Animation mit "filter: grayscale"

    Ich möchte die Bilder der Linkbox-Widgets in Schwarz-Weiß und bei Mouseover dann farbig darstellen.

    Layout Locus Responsive vom 2022-06-21.


    Zuerst eine Klasse colorize definiert, die (verkürzt) das hier macht:

    .colorize img { filter: grayscale(100%); }

    .colorize img:hover { filter: grayscale(0%); }

    Dann in den Linkbox-Widgets bei CSS-KLasse colorize eingetragen.

    Funktioniert prima. Nur, jetzt kommt der Haken:

    Trage ich eine Klick-URL in die Linkbox-Widgets ein, bleiben die Bilder Schwarz-Weiß.

    Lösche ich die Klick-URL, funktioniert es wieder.

    Hat jemand eine Idee, warum?

    Müsste ich online sehen können, um das zu beurteilen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Danke,

    wenn die Klick-URL enthalten ist, ist der Aufbau der Linkbox so, dass der Link das Bild überlagert, dies also keinen HOVER empfängt. Mit folgender Ergänzung zu ihrem CSS klappt es dann:

    Code
    .colorize img:hover,
.zpLinkBox.colorize > a:hover + p.zpLinkBoxImg > img {
    transition: all 300ms ease-in-out;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1; 
}

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

    Klasse! Dankeschön.

    Der goldene Support-Preis 2023 geht wie in den Vorjahren an die Zeta Software GmbH :)

    Ich bin jedesmal auf's Neue begeistert, wie Sie für Ihre Kunden da sind.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden