I am trying to make my page resize displayed images if and only if both of them are open at the same time.

This is what I have so far, with 2 link-images side by side that both redirect to a different game in another tab, with a href, and opens an image below with the corresponding game recap, with onclick. You can see it there: (https://i.stack.imgur.com/YF1ND.png)

My problem is that, when the first link-image is clicked and the first game recap image appears, if the second link-image is clicked, both images are displayed, but at the same size, resizing the whole page like so: (https://i.stack.imgur.com/KgmHY.jpg).

Is there a way to ask my HTML code to make it so both images are resized if both are opened at the same time?
Let’s say they’re w:100 h:100 when opened on their own, how do i make it so that, if both opened, both are resized to w:40 h40 side by side?

Also, if there was a way to make it so that clicking on one or the other image made it re-size to w:100 h:100, while masking the other, and then clicking again resized them both to w:40 h:40 again, and so on, this would be absolutely perfect.

How do I even write that? I don’t know what to look for or search to find the answer by myself. Can it be done with HTML? I’m aware of CSS and JavaScript, but don’t know how any of these 3 work.

Thank you

New contributor

Richter Mégane is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.