I have an image gallery that has a variety of images which are different sizes. Most are square images, but a few are rectangular. The images vary from 200 x 200 pixels to 800 x 800 pixels.
In my main gallery display, I show the image in a 200 x 200 display box. When someone hovers the mouse pointer over an image, I want the image to display full size and not affect any of the surrounding elements.
The only way I have been able figure out how to “zoom” in on the image is with the transform method, however that requires a fixed scale, and that won’t work in my scenario. Other examples I have found use 2 images and swap between the two which is not what I am trying to do.
Could someone please let me know how this can be done.