Prevent image from resizing while transitioning
I have several columns that expand to the whole row of them on click, each column contains an image, and the images keep the same size after expanding, so it would look like the clicked image moves horizontally and the other images disappear.
The problem is, because of
max-width: 100% on images that prevents overflow, the images will resize while transitioning since the column width will change. As a result, the height will change and make the layout shift.
Is it possible to "lock" the width of the images while transitioning instead of letting it refers to the temporary column width?2 Replies
Could you set up a Codepen or similar to demonstrate what you are trying to do? It might make it easier for somebody to understand and, hopefully, help you.
https://codepen.io/lumynou5/pen/MWMdyEr
oh I solved it by adding