How to scale image on top of others

I’ve been trying to achieve this for over an hour but whatever I do my image is always obscured by adjacent ones as shown in the screenshot below. How do I prevent this?


Here is my public share link: LINK
(how to access public share link)

Do you want the image to get bigger when you do mouse over?

I would use interactions and z-index. Let me know if you need a more deeper explanation.

I’ve already made a mouseover interaction to scale the image bigger on hover, what I want is the image to show in full and not get obscured/cropped/hidden behind it’s neighbours, like it is happening in the screenshot where the second (the big one) image’s right side is sitting below the third image.

Ok good. All you need to do then is change the z-index on all the other images as well. So that the image you hover over have the highest z-index of them all. For this you will want to use the :hover state.
You’ll find this top right corner.

26

On Position you choose Relative and set a z-index that is higher than the other images.

1 Like

Thanks a lot, this worked, I would never have thought of it, had no idea what z-index was.

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.