Q:

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

So I'm working on my first website, I'm trying to make an image gallery that shows thumbnails of images and enlarges them when you hover over them, I made the sizes of the images 100px*100px through the html itself then I used this css code:
img:hover {  
    width: 100%;  
    height: 100%;  
}

obviously I'm missing something because when the images are enlarged they move the other images inline away which causes glitches because then you're no longer hovering over it. I tried fiddling about with the z-index but it didn't work, I tried putting them in spans with hidden overflow but I faced the same problem, what should I do?

A:

You can take the hovered images out of the flow of the document with absolute positioning.
img:hover{
    width:100%;
    height:100%;    
    position: absolute;
    top:0;
    right:0;
}

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

