I have a few columns of images of different heights and I’m trying to make it so that when you click on one of them, it transitions into taking the full height of the screen while keeping its aspect ratio and hiding the other images by having its borders grow to take up the whole screen. Kind of like an overlay that grows from the position of the image.

The grid:

The overlay when the image is in the center:

The overlay when the image is on the side:

I’ve tried a lot of different options with changing the height and width properties but the transition never works, and the other images move around with the change in size. I also tried with position: absolute but then the other images move when the position changes and I still can’t get the transition to work.

My other idea was duplicate the selected image in the dom with a position: absolute but I can’t get it to start from the same place and size as the original image.

Is there a simpler way to do this?? I can’t find any similar examples but I’m sure this is a duplicate.