Plugin gesucht: Gallerie mit Klickbarem Overlay pro Bild

Gelöst trm2000
(@trm2000)

vor 2 Jahren, 3 Monaten
Hallo,

ich habe eine Seite über ionos webbuilder erstellt. Jetzt versuche ich diese in WordPress nachzubauen. Jedoch scheitert mein Vorhaben an diversen Plugins, die ich entweder nicht finde – oder die schon eingebauten WordPressfunktionen nicht korrekt umsetzen kann.

Konkret möchte ich bei einigen Bildern (Galerie / Slider / Bilder) diese mit einem Link hinterlegen. Aber gleichzeitig mit einem Overlay versehen.

Über customizer css habe ich das Overlay schon geschafft zu erstellen – jedoch liegen die css – Klassen der Beschriftugen nicht innerhalb des jeweiligen Links. Somit kann ich den Overlayeffekt nicht klickbar gestalten.

Hier ist das „Original“: https://tham.frank-langguth.de/
Hier die nachgebaute Seite: https://tham-thueringen.de/startseite-test/

Möchte mir bitte jemand auf die Sprünge helfen?

LG Mathias
- Dieses Thema wurde geändert vor 2 Jahren, 3 Monaten von trm2000.
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 10 Antworten – 1 bis 10 (von insgesamt 10)

wpzugang
(@wpzugang)

vor 2 Jahren, 3 Monaten

Hallo, auf deiner nachgebauten Seite kann ich keinen Inhalt sehen und daher auch nicht prüfen, was nicht stimmt.

Falls du ein Plugin willst, hast du schon geschaut, ob das Plugin SmartSlider3 diese Funktion bietet?
https://de.wordpress.org/plugins/smart-slider-3/

Thread-Starter trm2000
(@trm2000)

vor 2 Jahren, 3 Monaten

Hallo und vielen Dank für die Antwort.

Es geht mir nicht um den Slider, sondern um die 6 Bilder unter dem Slider.

Auf der aktuellen Startseite habe ich es einigermaßen zusammengeschustert, aber es gelingt mir nicht, dass ein overlay als Link anklickbar ist. Daher hae ich die Schrift als Link benutzt.

Außerdem habe ich die Testseite entfernt.
Moderator Hans-Gerd Gerhards
(@hage)

vor 2 Jahren, 3 Monaten
Hallo,
das sollte mit einem Gruppenblock, der einen Spalten-Block (3 Spalten) mit Bildern enthält, ohne Plugin machbar sein.

Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

Ich habe das auf der folgenden Testinstanz entsprechend als Beispiel erstellt – den Hover-Effekt siehst du, wenn du mit der Maus über das linke Bild fährst.

Den Hover-Effekt kann dann mit einer CSS-Regel unter Design > Customizer > Individuelles CSS eingestellt werden (Beispiel):
```
.wp-container-2.wp-block-column:hover {
    opacity: 0.1;
}
```
Das kann man sicher alles noch viel schöner gestalten. Aber es geht ja hier um eine grundsätzliche Lösung.

Noch besser ist die Verwendung einer zusätzlichen CSS-Klasse (mit Pfeil gekennzeichnet). Dann müsste man die CSS-Klasse noch entsprechend ändern.

Viele Grüße
Hans-Gerd
Thread-Starter trm2000
(@trm2000)

vor 2 Jahren, 3 Monaten

Hallo Hans-Gerd,

lieben Dank für die Mühe. Leider ist das schon längst umgesetzt.

Ich suche eine Möglichkeit, dass das overlay selbst als Link komplett fungiert.

Auf der Seite von ionos ist das sichtbar:
https://tham.frank-langguth.de/

LG Mathias

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 3 Monaten

Ich würde statt der Links einen Button verwenden, aber auch:

(zum Vergrößern anklicken)

Dann den Button per Custom CSS etwas anders gestalten.

Thread-Starter trm2000
(@trm2000)

vor 2 Jahren, 3 Monaten

Hallo Bego Mario,

das möchte ich nicht, mit Button. Ein overlay wird von e Verein gewünscht. 😅

LG Grüße Mathias

Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 3 Monaten

Der Block heißt Button, ist aber zunächst nichts anderes, als eine verlinkte Fläche, die du in Größe und Abständen anders gestalten kannst. Der Block liegt über dem Bild und ist demnach ein „Overlay“. Zu deiner Anforderung „Konkret möchte ich bei einigen Bildern (Galerie / Slider / Bilder) diese mit einem Link hinterlegen. Aber gleichzeitig mit einem Overlay versehen.“ sollte das passen.
Thread-Starter trm2000
(@trm2000)

vor 2 Jahren, 3 Monaten
Vielen lieben Dank.

Daran habe ich gar nicht gedacht.

Damit ist meine Frage beantwortet.

Liebe Grüße Mathias. 🙂

PS: teste ich morgen.
- Diese Antwort wurde geändert vor 2 Jahren, 3 Monaten von trm2000. Grund: Nachtrag
Thread-Starter trm2000
(@trm2000)

vor 2 Jahren, 3 Monaten
Hallo Bego Mario,

ich habe noch eine Rückfrage.

Per Button habe ich es geschafft – zumindest in der Desktopansicht. Die mobile Version klappt noch nicht.

Aber zu den Spalten habe ich noch zwei Fragen.

Frage 1:
Da ich ja 3 Bilder nebeneinander, 6 Bilder insgesamt, in zwei Reihen anordnen möchte, musste ich einen zweiten Reihenblock einfügen. Dort gibt es nun einen Abstand, den ich nicht weg bekomme. Per CSS finde ich auch nicht, wo da ein Padding, Margin oder Gap (Flex) angepasst werden könnte. Vielleicht kannst Du bitte noch einmal einen Blick drauf werfen?

Frage zwei: Warum bekomme ich die Bilder nicht heller?

Hier meine CSS-Klassen und der Aufbau der Blöcke..

Ansicht der Blöcke

1 = gruppespaltenhover
2 = spaltenhover
3 = (nichts vergeben)
4 = coverhover
5 = (nichts vergbeben)
6 = buttonhover
```
div#gruppespaltenhover.wp-block-group {
	display: inline-flex !important;
	gap: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
	box-sizing: content-box !important;
}
.spaltenhover {
	display: inline-flex !important;
	gap: 0px !important;
	min-height: 340px !important;
	max-height: 340px !important;
	min-width: 960px !important;
	max-width: 960px !important;
}
.coverhover {
	min-height: 320px;
	max-height: 320px;
	min-width: 320px;
	max-width: 320px;
	padding: 0px;
	margin: 0px;
	opacity: 1;
}
.buttonhover{
	min-height: 320px;
	max-height: 320px;
	min-width: 320px;
	max-width: 320px;
	opacity: 1;
}
.buttonhover > .wp-block-button__link {
	min-height: 320px;
	max-height: 320px;
	min-width: 320px;
	max-width: 320px;
	border-radius: 0px;
	cursor: pointer;
	opacity: 0;
  transition: 2.0s ease;
	color: #406a7c !important;
  background: #ffffffdd !important;
	font-size: 1.4em !important;
  vertical-align: middle;
	padding-top: 180px;
}
.buttonhover:hover > .wp-block-button__link:hover {
	opacity: 0.9;
	transition: 1.0s ease;
	color: #406a7c !important;
  background: #ffffffee !important;
	font-size: 1.4em !important;
  vertical-align: middle;
	padding-top: 120px;		
}
```
Hier noch der Link zur Testseite: Link zur Testseite

Lieben Gruß Mathias
- Diese Antwort wurde geändert vor 2 Jahren, 3 Monaten von trm2000. Grund: Gurß vergessen
- Diese Antwort wurde geändert vor 2 Jahren, 3 Monaten von trm2000. Grund: CSS angepasst
Thread-Starter trm2000
(@trm2000)

vor 2 Jahren, 3 Monaten
Den Abstand habe ich inzwischen weg bekommen.

Dazu musste ich einen Gap wie folgt anpassen:
```
.spaltenhover {
	display: inline-flex !important;
	gap: 0px !important;
	min-height: 292px !important;
	max-height: 292px !important;
	min-width: 960px !important;
	max-width: 960px !important;
}
```
Komisch, weil die Bilder exakt 320x320px sind.

Die Frage nach den dunklen Bildern bleibt 🙂

LG Mathias