Hover-Effekt auf Galleriebildern

    Hallo zusammen,

    ich benutze die Gallerie von Wordpress, um 6 Bilder auf einer Seite einzubinden.
    Jetzt möchte ich einen Hover-Effekt erzielen, der bei einem Mouseover der Bilder die Bildunterschrift einblendet.
    Also ich fahre mit der Maus darüber, das Bild soll verblassen und die Bildunterschrift soll ich der Mitte des Bildes erscheinen. Der Effekt muss nicht 1:1 zu sein wie beschrieben aber wichtig ist, dass in irgendeiner Art und Weise die Bildunterschrift eingeblendet wird.
    Gibt es fertige Plugins für diesen Einsatzzweck oder kann ich das relativ unproblematisch selber lösen?

    Vielen Dank für eure Antworten

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Bei der nativen Galerie von WordPress wird in der Galerieübersicht schon eine Bildunterschrift mit ausgeben. Die müsstest du einfach im Stylesheet entsprechend stylen: Das Element, das Bild und Beschriftung enthält, auf position: relative; das Element, das die Beschriftung enthält, auf position: absolute; hoher z-index und an die richtige Stelle setzen.
    Für die Verblassen- und Einblendeffekte mal nach css-Effekten suchen.

    Aber bedenke, dass die Touchgeräte (Smartphones, Tablets) kein Mouse over kennen.

    Gruß
    helix

    Vielen Dank, das Styling der Bildunterschrift und die Positionierung dieser hat schon einmal wunderbar funktioniert.
    Beim letzten Schritt hakt es jedoch noch ein bisschen. Das Bild soll ja beim Überfahren mit der Maus verblassen, das klappt schon einmal. Jedoch soll gleichzeitig das Element mit der Bildunterschrift erst dann auch angezeigt werden. Momentan ist es dauerhaft sichtbar. Ich schätze das lässt sich nur per JavaScript realisieren, oder gibt es da auch eine Möglichkeit per CSS?

    Ja, du musst beide Zustände definieren: Den Normalzustand, in dem das Bild nicht sichtbar ist (opacity: 0;) und den :hover-Zustand mit opacity: 1;

    Gruß
    helix

    Das klappt alles noch nicht so, wie ich mir das wünsche, weil ich den Faktor Responsivität noch mit bedenken müsste.

    Letztendlich suche ich eine Art Gallerie, mit der ich 3 Bilder nebeneinander in ihrer Originalgröße auf der Startseite anzeigen kann. Die Bilder sollen einen Mouseover-Effekt besitzen, der iin irgendeiner Weise beim Überfahren mit der Maus die Bildunterschrift auf dem Bild anzeigt. Zudem sollen die Bilder einzeln auf bestimmte Seiten verlinkbar sein und das Ganze muss responsive sein.

    Gibt es da eine fertige Lösung bzw. eine Kombination von Plugins, mit denen ich das umsetzen kann?

    Vielen Dank, so ähnlich hatte ich es bereits umgesetzt.

    Mein Problem ist jetzt nur, dass dort mit festen Größen gearbeitet wird und das die Wordpress-Gallerie nicht responsive ist, werden die Bilder runterskaliert und die Fläche der Bildunterschrift ragt über das Bild hinaus. Ich hoffe ihr versteht was ich meine.

    Auf Mobilgeräten funktioniert der Effekt zwar nicht, aber Benutzer mit kleineren Monitoren bekommen doch dann sicher auch kleinere Bilder angezeigt oder habe ich da einen Denkfehler? Wie kann man dem entgegenwirken?

    Zitat von Xethon

    (...)
    Mein Problem ist jetzt nur, dass dort mit festen Größen gearbeitet wird und das die Wordpress-Gallerie nicht responsive ist, werden die Bilder runterskaliert und die Fläche der Bildunterschrift ragt über das Bild hinaus. (...)

    Die Wordpress-Galerien sind, wenn man denn etwas mehr will, in vielerlei Hinsicht nicht so toll geeignet, wenn Du also ohne ein aufwendiges Galerie-Plugin, nach Deinen Wünschen frei gestaltete Galerien anlegen möchtest, mach es doch einfach als Seite oder Beitrag und setze zusätzlich lediglich ein Lightbox-Plugin zu vergrößerten Ansicht ein.

    Dafür als Basisvariante die Vorschauthumbs der Bilder ohne Zeilensprung nebeneinander anlegen, die (responsive) Anordnung erledigt das Theme und seine Einstellungen (möchtest Du mehr, setzt z.B. ein Shortcode-Plugin für Spalten ein) i.d.R. von selbst, die Darstellung im visuellen Editor des Admin-Backends, kann dabei von der Im Frontend abweichen.

    CSS-Anweisungen für allerlei Effekte hinterlegst Du z.B. im Custom-CSS-Feld (wenn im Theme nicht vorhanden, gibt’s das auch als universelles Plugin) oder aber (was aufwändiger ist, weil’s im Grunde ein Childtheme bedingt) in der style.css oder gar in einer eigenen zusätzlichen CSS-Datei.

    Um diese zentral anlegten CSS-Anweisungen auf ein Bild anzuwenden, setzt Du deren Namen (mehrere sind möglich, einfach durch Leerzeichen trennen) in das Feld [COLOR=#0000cd]Erweiterte Optionen -> Bild-CSS-Klasse [/COLOR](dorthin gelangst Du u.a. durch Klick auf das Bild im visuellen Editor und die Auswahl des Bleistiftes im dann erscheinenden Kontextmenü).

    Ein Beispiel für einen simplen Rahmen samt Schatten mit einem minimalistischen Hovereffekt (da geht natürlich mehr) der den Rahmen verändert, ist das z.B.

    [COLOR=#006400].rahmenx {
    border:2px solid #EFF0FF;
    margin: 15px;
    padding:10px;
    box-shadow: 10px 10px 20px grey;
    }

    .rahmenx:hover {
    background-color: lightgrey;
    }
    [/COLOR]
    Der o.g. Quellcode müsste dann ins Feld Custom-CSS (s.o.) und im Feld [COLOR=#0000cd]Erweiterte Optionen -> Bild-CSS-Klasse[/COLOR] müsste nur [COLOR=#006400]rahmenx[/COLOR] eingetragen werden.

    Wenn es nur wenige Bilder/Galerien sind, die auf diese Weise aufgepeppt werden sollen, kann man die CSS-Anweisungen auch innerhalb von HTML-Tags setzten, das ist zwar kein guter Stil (zumindest wenn’s sich vermeiden lässt), tut aber der Funktion aber keinen Abbruch.

    Und noch was (möglicherweise weißt Du das ja schon), Text der im Feld [COLOR=#0000cd]Erweiterte Optionen -> Bildtitel-Attribut[/COLOR] eingetragen wird, erscheint beim Überfahren des jeweiligen Bildes mit dem Mauszeiger (nicht bei Touchscreens) im Frontend direkt über dem Bild auf Höhe des Mauszeigers.

    Zitat von Xethon

    Mein Problem ist jetzt nur, dass dort mit festen Größen gearbeitet wird und das die Wordpress-Gallerie nicht responsive ist, werden die Bilder runterskaliert und die Fläche der Bildunterschrift ragt über das Bild hinaus. Ich hoffe ihr versteht was ich meine.

    Auf Mobilgeräten funktioniert der Effekt zwar nicht, aber Benutzer mit kleineren Monitoren bekommen doch dann sicher auch kleinere Bilder angezeigt oder habe ich da einen Denkfehler? Wie kann man dem entgegenwirken?


    Schritt 1: definiere in deiner functions.php, dass die Galerien in html5 ausgegeben werden (findest du im WordPress-Codex unter add_theme_support, siehe https://codex.wordpress.org/Theme_Markup). Damit hast du kein br-Tag mehr nach soundsoviel Bildern (Spalteneinstellung) und keine vorgegebenen Abstände bei der Bildbeschriftung.

    Dann definiere die Breite für das umschließende figure-Element und gib dem Bild

    Code
    width: 100%;
height: auto;


    Und dem Element, das den Beschriftungstext enthält, das Gleiche. Plus zusätzlich eine Angabe zum vertical-align.
    Damit sollten Bild und Bildbeschreibung zusammenkommen.

    Wenn dein Bild insgesamt kleiner wird, als die Bildbeschriftung lang ist, wird es Zeit, über einen neuen breaking Point (Media Query) in deiner css nachzudenken: weniger Bilder in einer Zeile oder Bildbeschriftung übers oder unters Bild.

    Das mit dem Nebeneinander-Floaten ist ein Rechenspiel – oder du befasst dich mit css-box-sizing.

    Oder du bleibst bei einer festen Größe und gibst den figure-Elementen ein

    Code
    display: inline-block;

    Da die Displays von Touch-Geräten unter Umständen gar nicht so klein sind (Tablets), ist es sinnvoll, hier nicht allein über Media Queries, d.h. die Bildschirmgröße, zu arbeiten, sondern zusätzlich mit wp_is_mobile (siehe https://codex.wordpress.org/de:Funktionsreferenz/wp_is_mobile) entweder für mobil oder für nicht-mobil eine weitere Klasse zu vergeben, so dass Touchgeräte auf jeden Fall die Bildbeschriftungen angezeigt bekommen können.

    Gruß
    helix

    Vielen Dank, ich konnte den Effekt nun so nachbauen, dass er mich zufriedenstellt.
    Allerdings habe ich jetzt ein neues Problem, und zwar verwende ich das Plugin "WP Gallery Custom Links", um die einzelnen Bilder mit einem Link meiner Wahl zu versehen.
    Leider liegt jetzt der Effekt über dem Bild mit dem Link, sodass der Link nicht anklickbar ist. Wenn ich den Link per z-index nach vorne hole, ist der Hover-Effekt nicht mehr zu sehen. Wie kann ich diese Problematik lösen?

    Auf die Schnelle zwei Lösungsmöglichkeiten, welche besser passt, hängt von der konkreten Situation ab (Link zur Seite wäre dann hilfreich):

    a) entweder muss dein Beschreibungstext, der sich über das Bild legt, kleiner sein als das Bild, so dass der sichtbare Bereich vom Bild klickbar bleibt.
    b) oder du verlinkst deinen Beschreibungstext statt des Bildes.

    Wahrscheinlich gibt es noch mehr Lösungsansätze, dazu wäre dann auch wieder ein Link zum Geschehen hilfreich.

    Gruß
    helix

    Danke für den Tipp, ich habe den Link jetzt direkt in dem Beschreibungstext gesetzt, das funktioniert für mich am besten.
    Ein Anliegen hätte ich noch, was mir Kopfzerbrechen bereitet, und zwar habe ich im Menü einen Untermenüpunkt definiert, der beim Überfahren des Hauptmenüpunktes angezeigt werden soll. Das funktioniert auch, allerdings NUR auf der Startseite. Auf den anderen Seiten wird das Untermenü nicht eingeblendet, obwohl Firebug mir anzeigt, dass display: none sich auf display: block ändert und sonst eigentlich auch alles genau wie auf der Startseite ist. Ob ein Menü ausklappt ist doch nicht davon abhängig, auf welcher Seite ich mich befinde, oder? Ist jmd. so ein Phänomen bekannt?

    Hm, wo hab ich schon wieder die Glaskugel hingelegt …

    Üblicherweise, wenn du eine waagrechte Navleiste hast und deine Unterpunkte sich unterm jeweiligen Punkt drunter ausklappen sollen (und du das alles über css lösen willst), sollten die li-Elemente der Hauptnavigation mit position: relative; definiert sein und dann die ul-Elemente für die Subnavigation mit position: absolute; und einem hohen z-index versehen sein. Hast du das so? (Könnte sein, dass auf den Unterseiten deine Subnavigation zwar ausklappt, aber von einem anderen Element überdeckt wird.)

    Gruß
    helix

    Ja, so habe ich es versucht, aber es will einfach nicht klappen.
    Die Seite um die es geht ist http://photopaper.world
    Wenn ich auf der Startseite über den Menüpunkt Shop fahre erschein die Unternavigation mit den Items, doch sobald ich auf den Seiten "About", "Shop", oder "Newsletter" bin, klappt es nicht. Würde mich freuen, wenn sich das einmal jemand anschauen könnte.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden