Interactive Photo Grid

Okay, so I'm trying to implement an idea that I've had, but don't know where to start. I'm going to describe this in the best detail, and most clear english as possible, so I hope you understand what I'm trying to do.

I'm creating a website for a company that has 23 employees, but they all play a major role and are featured on the website. I'm trying to implement a photo grid that has 6 people per row, and 4 rows. I want the grid to just be the images of the people with no text or anything. So the photos will be laying right next to and on top of each other, no spacing. Then, when you hover over the image it shows the person's name and position over the image. I understand how to do this part, so I do not need ideas on this.

However, I want the user to be able to click on the image of the employee that they want to gather more information about, and then I want a section that is 100% width and a specific amount tall to span the width of the entire page, almost like a modal, but that doesn't pop up over the content. This section will have all the information about the employee that the person selected. Then, when the user clicks again, it closes and goes back to the same grid that was there before, or the user has the option to click another image in the grid either above or below the new section with the employees information and it will change the info inside the new section from the first employee they clicked on to the second.

It should be almost like a tab that you click on and it expands new content into a new area. I am very sorry if this doesn't make any sense, and will try and answer any questions as clearly as possible. I don't have any code yet, because I don't really know how to start.

Any input would be helpful, thanks!

-Logan