How to make "big" rollover images that don't move the other adjacent items in the layout?

I made a photo album of what I hope to achieve, but it basically goes like this:
1) A row of 4 base individual images . 2) On rollover/hover of each image, a bigger one is displayed, directly in the same place. 3) On click of this big image, an info box is shown below.

I started messing with this concept using pure CSS. I created 4 blank divs with their own IDs. I specified a background-image for their default state (setting a height/width of the base image) and made all 4 divs float left. Display was perfect to start. I then added a CSS class of (id):hover for each div, replacing the base background image with the new big image. Here's an example excerpt of the code:

#box01 {
    width: 213px; 
    height: 241px; 
    background-image: url(box01.png);
    background-repeat: no-repeat;
    float: left;
}
#box01:hover {
    width: 353px; 
    height: 353px; 
    background-image: url(box01-big.png);
    background-repeat: no-repeat;
}

<div id="boxes">
    <div id="box01"></div>
    <div id="box02"></div>
    <div id="box03"></div>
    <div id="box04"></div>
</div>

This functions but the problem is that the big image basically takes over the space. See this as an example.

The display of the info box under doesn't seem too difficult (seems like an onclick event to toggle display of the div) but I'm wondering about the movement of each box. I had a thought of potentially making a second row of images (the big versions) directly on top of the base images, and somehow making it so that a rollover of image01 would change the visibility of image01-big so it would still be in the same place without shifting the base images.

That said, this seems better suited for JavaScript or JQuery, right? I'm not too experienced in that, but I'd love to learn and this seems like a fairly decent project to help me do just that.

Would anyone be able to point me in the right direction for what I'm looking to achieve? Whether it's a tutorial on this kind of concept, or something else altogether, I would very much appreciate it! I did some research and found some rollover tutorials, but nothing specific enough to deal with the issue I'm encountering here of adjacent items moving around the page altogether...

You can use CSS’s transform property to enlarge elements without them taking up more space in the document’s layout. This might make your image look pixellated, but you can fix this by (on hover) showing a higher-resolution image.

Here is a quick example:
https://jsbin.com/johomiy/edit?html,css,output

So no Javascript needed at all :)