Welcome to the Treehouse Community
Looking to learn something new?
matthew steiner6,264 Points
I'm confused, this the code we have going so far in this section, we have it programmed for the overlay to come AFTER the image when a specific image is clicked. Wouldn't that cover up the image?
Also, if the image is appended to the overlay, why do we have to use a jQuery function to specifically show the overlay at all. Wouldn't the image, the caption and the overlay just all show up at the same time?
The overlay is appended to the body but it's display is set to none (as if it doesn't exist). This allows the other images to be clicked and once an image is clicked the overlay's display is changed with show() & then hide() once overlay is clicked.
Note: You can always inspect an element with your browser and check the element's style.
jQuery is used so the proper image clicked is shown. The <IMG> tag is blank until you select an image and that img src is copied over the overlay img tag.
Overlays are used as a design to make the image pop up more and let the user know the focus is on the image they selected and as well as clicking on the overlay will hide it away.
As for all of the content showing up at the same time, yes it does since the overlay holds the image and caption. Setting the overlay to show makes all elements show up together.
Hopefully that clears up things.