Hover-Effekt auf Galleriebildern

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

 

Du kannst die Bildunterschrift in CSS zum Beispiel per opacity: 0 verstecken und dann beim :hover auf opacity: 1 setzen. Das lässt sich mit transition auch animieren.

 

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

 

Schau dich mal bei CSS3 um. Dort gibt es den Effekt.
http://james-star.com/answers/de/css3-effekte-transformationen-animationen-uebergaenge/

z.B.
[h=2]17: Bild mit Textüberlagerung – Verblasseneffekt[/h]

 

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 Erweiterte Optionen -> Bild-CSS-Klasse (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.

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

.rahmenx:hover {
background-color: lightgrey;
}

Der o.g. Quellcode müsste dann ins Feld Custom-CSS (s.o.) und im Feld Erweiterte Optionen -> Bild-CSS-Klasse müsste nur rahmenx 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 Erweiterte Optionen -> Bildtitel-Attribut 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.

 

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:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

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:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

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

 

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

 

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

 

Hier liegt das Problem: .home #mainNav ul ul
Mit dem Selektor wird der Subnav nur auf der Startseite ein Hintergrund zugewiesen.