Astra: Header Builder Logo Mouseover

Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 9 Monaten

    Hallo,
    was genau meinst du mit „aufpumpen“? – Meinst du etwa so etwas, dass beim Hovern auf dem Icon des Logos das Logo vergrößert wird? – das wäre per CSS grundsätzlich möglich, aber eher ungewöhnlich.

    Noch ein Hinweis: Die Schriftgröße und -farbe in der Navigation ist selbst für mich als nicht behinderter Mensch sehr schlecht lesbar.

    Viele Grüße
    Hans-Gerd

    Thread-Starter mleherb

    (@mleherb)

    vor 9 Monaten

    Hallo Hans-Gerd,
    Mein Auftraggeber möchte einen Effekt bei Mouseover auf das Logo haben, vergrößern wäre eine Option.
    Danke für den Hinweise bezüglich Lesbarkeit!
    LG;
    Martin

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 9 Monaten

    Hallo,
    füge bitte die folgende CSS-Regel unter Design > Customizer > Zusätzliches CSS am Ende ein und teste dann bitte, ob es funktioniert:

    img.custom-logo:hover {
    transform: scale(1.2);
}

    Das wäre eine mögliche Lösung, aber bezüglich des hochgeladenen Logos nicht optimal (unscharf).

    Viele Grüße
    Hans-Gerd

    Anonymous User 22040435

    (@anonymized-22040435)

    vor 9 Monaten

    Da ich zufällig genau jetzt auch Effekte in ein Headerlogo einbaue, mein Tipp: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation.
    Denn wahrscheinlich soll das Logo nicht urplötzlich „aufpumpen“, sondern mit ein bisschen Verzögerung.

    transform scale (wert) geht, klar. Aber eben abrupt.

    img.custom-logo {
       width: 50%; height: auto;
       transition: width 5s cubic-bezier(0.65, 0.05, 0.36, 1) 0s,
    }
    img.custom-logo:hover {
       width: 100%;
    }

    könnte auch gehen. Das sollte das Logo zuerst in 50% seiner Größe angezeigt werden und beim Maushover auf 100% gezoomt werden.

    (ungetestet, weil ich eher was anders machen wollte, was ich nicht hinbekomme: den Blend-Mode weich ändern. Wurst, andere Story)

    • Diese Antwort wurde geändert vor 9 Monaten von Anonymous User 22040435. Grund: Code Korrektur
    Thread-Starter mleherb

    (@mleherb)

    vor 9 Monaten

    @hage: Vielen Dank! Funktioniert, wenn auch wie du schreibst nicht perfekt wegen der Unschärfe.

    @youngtimer: ich habe es nicht geschafft, dass es funktioniert, danke für den Vorschlag!

    Anonymous User 22040435

    (@anonymized-22040435)

    vor 9 Monaten

    Beide Codes funktionieren, habs vorhin getestet.
    Beim transition Beispiel von 50 auf 100% wird das Logo perfekt dargestellt.

    Bei transform wird es eben größer gezeigt, als es ist.
    Möglicherweise geht das dann, wenn man das Logo zuerst etwas kleiner zeigt width 50% und dann mit transform: scale(1.0); auf die echte Größe bringt.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 9 Monaten

    wenn auch … nicht perfekt wegen der Unschärfe.

    Abhilfe: Logo im Customizer > Header-Builder > Website-Titel und Logo auf doppelte Größe setzen oder ein „Anderes Logo für hochauflösende Displays“ hinzufügen, dann mit einer CSS-Regel eine kleinere Größe festlegen (so wie bereits von @youngtimer beschrieben). Wenn dann das Bild skaliert wird, ist es nicht mehr unscharf.
    Bei dem Code von @youngtimer müsste wohl auch noch die Zeile mit der transition für img.custom-logo:hover wiederholt werden?

    An dieser Stelle wieder der obligatorische Hinweis, dass wir hier keine Grundlagen (HTML, CSS, JS, PHP, …) vermitteln können und auch nicht auf Zuruf passende CSS-Regeln liefern, wenn jemand sein Theme ändern möchte. Wir machen (wie in diesem Fall) gerne eine Ausnahme, wenn eine Lösung naheliegend ist, aber daraus begründet sich kein Anspruch anderer Teilnehmenden, ebenfalls CSS-Regeln „abfordern“ zu können.

    Anonymous User 22040435

    (@anonymized-22040435)

    vor 9 Monaten

    müsste wohl auch noch die Zeile mit der transition für img.custom-logo:hover wiederholt werden?

    Also mit transform: scale() sollte es perfekt gehen (und auch ressourcenschonender als mit der Animation von width)

    img.custom-logo {
       transform: scale(0.5); /* Als Ausgangszustand ginge auch width: 50%; height: auto; */
       transition: transform 1s ease-in-out 0s;
    }
    img.custom-logo:hover {
       transform: scale(1.0);
    }

    Auch ungetestet

    • Diese Antwort wurde geändert vor 9 Monaten von Anonymous User 22040435. Grund: Wieder verkopiertippt
Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)
  • Das Thema „Astra: Header Builder Logo Mouseover“ ist für neue Antworten geschlossen.
  • In: Themes
  • 8 Antworten
  • 4 Teilnehmer
  • Letzte Antwort von: Anonymous User 22040435
  • Letzte Aktivität: vor 9 Monaten
  • Status: gelöst