CSS Z-Index ändert sich beim Hover nicht

[pp3345]

Hallo,

ich habe folgendes Problem: Ich habe eine Art Galerie mit mehreren Bildern nebeneinander. Beim Hover sollen sich die Bilder per Transition vergrößern, was auch klappt, allerdings liegen diese dann teilweiße hinter den anderen, das gehoverte Foto sollte aber möglichst über den anderen liegen. Ich habe bereits versucht, für den Hover einen höheren Z-index zu wählen, was aber nicht funktioniert. Hat jemand eine Lösung parat?

Das hier ist der Code:

.photo {
	max-width: 145px;
	max-height: 95px;
	margin: auto;
	box-shadow: 0px 0px 3px #000;
	-moz-box-shadow: 0px 0px 3px #000;
    -moz-transition: max-width 1s, max-height 1s;
    -o-transition: max-width 1s, max-height 1s;
    -webkit-transition: max-width 1s, max-height 1s;
    transition: max-width 1s, max-height 1s;
    z-index: 3;
}
.photo:hover {
    max-width: 250px;
    max-height: 150px;
	z-index: 4;
}

 

[thetroll]

Hallo,
z-index funktioniert (glaube ich)nur bei positionierten Elemente. Füge Folgendes deiner Style-Definition hinzu:

position: relative;

mfg, thetroll

 

[Kausalat]

Nicht ganz, z-index funktioniert ausschließlich bei absolut positionierten Elementen, sprich:

position: absolute;

 

[pp3345]

Danke für euren Tipp, ich konnte es jetzt mit relativer Positionierung fixen.

@Kausalat: Laut w3schools.com geht es wohl auch mit relativer und fixer Positionierung.

 

[Kausalat]

Gut, nur zur Ergänzung:

Es geht mit absolut (absolute), relativ (relative), statisch (static) und fixierten (fixed) Elementen .

 

[QXARE]

Und zur vollständigen Ergänzung. Mit static positionierten Elementen (default) funktioniert der z-index nicht. Sonst würde es nämlich ohne Positionierung funktionieren.