Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
matthew steiner
6,264 PointsImage/Overlay order
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?
1 Answer
jag
18,266 PointsThe 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.