如何在不移动其他图片的情况下将图片悬停在其他图片上？

Question

Originally, in my CSS, I have 4 images set together. 2 are on top, floated next to each other, and 2 are on the bottom.

.img1 {
    float: left;
}

.img2 {
    float: left;
}

.clear1 {
    clear: both;
}

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

This is the basic idea of the code that I have for the 4 images to be next to each other, 2 on top, and 2 on the bottom. I want the first image, when I hover over it, to cover the other 3 images on the page. I know that to make the image hover, I have to do .img1:hover { followed by multiple attributes.

I am unaware on how to make the image cover the other 3 images, as it enlarges, without having the other 3 images move. If anyone knows how to do this, please help. When I just made img1 larger, it pushed the other 3 images down, and I do not want that.

Other researched showed that using the z-index attribute might be helpful, but I am unaware on how to use it.

<div class="img1" >
</div>


<div class="img2" >
</div>


 <div class="img3" >
</div>


 <div class="img4" >
</div>

Answer 1

In order to use the z-index value, you will first need to set a position property other than static. If you choose relative, then the images will move around as expected. Then, you can set the z-index of the image you want above the others to a higher number (the default is 0).

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

Answer 2

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;
}