Wie man ein Bild über andere bewegt, ohne die anderen Bilder zu bewegen?

Question

Ursprünglich habe ich in meinem CSS 4 Bilder zusammen gesetzt. 2 sind oben, schweben nebeneinander, und 2 sind auf der Unterseite.

.img1 { 
    float: left; 
} 

.img2 { 
    float: left; 
} 

.clear1 { 
    clear: both; 
} 

.img3 {float: left;} 
.img4 {float: left;} 
.clear {clear: both;} 

Dies ist die Grundidee des Codes, die ich habe für die 4 Bilder miteinander, 2 auf der Oberseite neben sein, und 2 auf der Unterseite. Ich möchte das erste Bild, wenn ich darüber schwebe, um die anderen 3 Bilder auf der Seite zu decken. Ich weiß, dass um das Bild zu schweben, ich .img1:hover { gefolgt von mehreren Attributen tun muss.

Mir ist nicht bewusst, wie das Bild die anderen 3 Bilder, wie es vergrößert, zu machen, ohne dass die anderen 3 Bilder bewegen. Wenn jemand weiß, wie das geht, bitte helfen Sie. Als ich gerade img1 größer gemacht habe, hat es die anderen 3 Bilder runter geschoben, und das will ich nicht.

Andere recherchierte zeigten, dass die Verwendung der z-index Attribut hilfreich sein kann, aber ich bin mir nicht bewusst, wie man es benutzt.

Answer 1

Demo: https://jsfiddle.net/IA7medd/qncrsq8d/

.images{ 
    position:relative; 
    overflow:hidden; 
} 
.img1, .img3 { 
    float: left; 
    max-width:49%; 
} 

.img2, .img4 { 
    float: right; 
    max-width:49%; 
} 

.images img{ 
    max-width:100%; 
} 

.images img:hover{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    max-width:100%; 
    z-inedx:9; 
} 

Answer 2

Um den Z-Index-Wert zu verwenden, müssen Sie zuerst eine andere Positionseigenschaft als statisch festlegen. Wenn Sie Relativ wählen, werden die Bilder wie erwartet verschoben. Dann können Sie den Z-Index des gewünschten Bildes über den anderen auf eine höhere Zahl setzen (der Standardwert ist 0).

.img1, .img2, .img3, .img4 { 
float:left; position: relative; } 
.img1: hover { 
z-index:10; }