I only started coding in html for 2 days so I don't know the exact terms in coding so hopefully you guys can understand. I've been trying to code this for 2 hours now and I can't seem to find a solution to have multiple pictures in one single line display without each photo breaking into another "line" like using <p>. When using the basic <img> code, I'm able to put 2 images next to each other but when I try to code a expand on hover effect it only shows one image per line, regardless of its size. I also can't get the other images in its assigned <div> class to decrease the width without the whole image decreasing in size.
The expanding effect works fine but it doesn't properly decrease the width like i want it to and each photo "line breaks". I want it to look like this or this.
screenshot here(cursor is hovering on the last image)