html - How to make images remain in place when enlarged by hovering? -

So I'm working on my first website, I'm trying to create an image gallery that has thumbnails of images and Expand shows when you hover over them, I created images of 100px * 100px via html, then I used this CSS code:

  img: hover {width: 100 %; Height: 100%; }  

Obviously I'm missing something because when images are made bigger, they move other images inline, which causes the match, because then You do not run it again. I tried to get upset about z-index but it did not work, I tried to put them in the span with the hidden overflow but I had to face the same problem. What should I do?

You can take pictures coming out of the flow of full-fledged documents.

  img: hover {width: 100%; Height: 100%; Status: Completed; Top: 0; Correct: 0; }  

Be sure to set the position of the container to the relative.