Bild bleibt bei Hover im Hintergrund

[Thomasge]

Hallo,

ich habe ein Bild mit "background-image:url("files/themes/contao/bild1.jpg");" eingebunden und möchte zur besseren Darstellung das Bild nun per hover vergrößern. Was auch soweit funktioniert, aber das größere Bild bleibt immer im Hintergrund vom kleinen Bild egal was ich auch mache. Ich bekomme es irgendwie nicht gebacken, daß sich das große Bild über das kleine lagert. Ich habe schon viele Möglichkeiten mit overflow, display und position ausprobiert, aber nichts brachte eine Änderung. Wer kann mir bitte hierzu einen hilfreichen Tipp geben?
Danke!


Gruß
Thomas

[tab]

z-index dürfte wohl die Lösung sein.

[Thomasge]

z-index dürfte wohl die Lösung sein.

z-index ist gesetzt, kleines Bild hat z-index:1; und das Bild für hover hat z-index:2;

Gruß
Thomas

[tab]

Wie erzeugst du das zweite, größere Bild?

[Thomasge]

Wie erzeugst du das zweite, größere Bild?

also das kleinere Bild binde ich als ce_image Element über Artikel auf die Webseite ein. Das zweite größere Bild wird dann mittels einer CSS-Datei mit "background-image:url("files/themes/contao/bild1.jpg");" bei hover aufgerufen, was auch wunderbarfunktioniert. Aber das kleine Bild liegt immer über dem großen Bild und ich weiß nicht wie das kleine Bild in den Hintergrund vom großen Bild zu bringen ist.
Danke!


Gruß
Thomas

[mlweb]

Wenn Du mit einem Inhaltsbild im gleichen Element arbeitest dem auch der Hintergrund zugeordnet ist, kann das m.E. so nicht funktionieren. Grundsätzlich würde ich aber nur mit einem Bild im Hintergrund arbeiten welches ich per css vergrößere.

Aber vielleicht habe ich Dein Vorhaben auch nicht richtig verstanden.

Link zum Problem wäre wie immer bei so etwas ganz nett.

[Thomasge]

danke für die Infos. Auch beim hernehmen vom gleichen Bild in der kleinen und großen Ansicht ist eine Verbesserung eingetreten, denn jetzt wird das Bild bei hover wesentlich schärfer dargestellt.
Aber ein Problem habe ich dennoch: Bei dem Bild in der kleinen Ansicht ist eine Bildunterschrift und wenn nun bei hover das große Bild dargestellt wird, dann wird die Bildunterschrift nach unten verschoben. Ich möchte aber, dass die Bildunterschrift vom großen Bild überblendet oder bei hover ausgeblendet wird. Alle meine Versuche sind gescheitert. Wenn dem figcaption ein niedriger z-index gegeben wird als dem hover Bild hat das keine Auswirkung.
Was könnte ich tun um figcaption zu überblenden?
Danke!


Gruß
Thomas

[mlweb]

Zeig doch mal einen Link, damit man weiß worüber man spricht.
Im Moment ist mir nicht klar wie Du es im Endeffekt überhaupt gelöst hast.

Ganz grundsätzlich kann man natürlich Objekte bei hover über css

• sanft mit transition:1s und opacity: 0 ausblenden oder
• abrupt mit display: none;

[Thomasge]

Zeig doch mal einen Link, damit man weiß worüber man spricht.
Im Moment ist mir nicht klar wie Du es im Endeffekt überhaupt gelöst hast.

Ganz grundsätzlich kann man natürlich Objekte bei hover über css

• sanft mit transition:1s und opacity: 0 ausblenden oder
• abrupt mit display: none;

ich kann leider keinen Link anführen, weil diese Homepage derzeit noch auf XAMPP liegt und lokal ist. Außerdem muss der Webspace erst noch umgestelt werden, weil das derzeitige Hostprodukt keinen Composer und Contao-Manager unterstützt. Da dies eine Vereinspage ist, muss erst noch die nächste Vorstandssitzung abgewartet werden, wo eine Vertragsumstellung beschlossen werden kann.

Ich habe 3 Dateien beigefügt, wo meine Probleme zu sehen sind.
1. Bild - Ansicht mit kleinem Bild
2. Bild - Ansicht mit großem Bild (hier möchte ich figcaption überblenden, aber im Moment ist figcaption unter dem großen Bild)
3. Bild - Ansicht mit nachfolgendem Bild (hier kann auch nicht überblendet werden z-index, overflow, display und position funktionieren nicht wie bei der alter Homepage, da das nachfolgende Bild nach unten verschoben wird)
Danke!

Ansichten.zip

Gruß
Thomas

[Thomasge]

ich habe es jetzt nach vielem probieren und testen so wie gewünscht hinbekommen.
Aber nun ist mir ein unschönes Verhalten aufgefallen, nachdem ich die Vergrößerung vom Bild um transition:1s; erweitert habe.
Das Layout hat 3-Spalten und folgendes passiert: beim Überfahren mit der Maus auf ein Bild wird dieses Bild mit hover vergrößert. Ist aber die Großansicht vom Bild breiter als die mittlere Spalte (ohne transition tritt es nicht auf), dann wird das Bild hinter der rechten und linken Spalte gezoomt und tritt erst in den Vordergrund, wenn das Bild die volle Breite erreicht hat.
Kann man diesen Zoom auch im Vordergrund ablaufen lassen? Gibt es hierfür einen entsprechenden Css-Code?
Für Tipps und Antworten wäre ich sehr dankbar.

Gruß
Thomas