Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So, in this movie I want to show you how to create an overlay. We're going to use a lot of things that we already used in previous movies. So, first off, I'll remove this console lock command. And what I want to do is create a variable and call it myoverlay. And in here I want to create a new element. So, I'm going to use the Create Element method. And create a new div in our document. So, just so that it's easier to target, I want to make this overlay have an id of overlay. I can do that by just using the dot notation and pass an empty attribute.
In this case the id that I want to change and then I want to add this to the current document so, I'll just add it to the body tag and use the Append Child method. And pass along my overlay so, what this'll do is once you click on an image its going to add this overlay to the end of the bodytag, so let's go ahead and go into our code. So, here we are in the artist page. And I'm going to scroll down and click on one of these items. It doesn't look like anything happened but I am going to break into the console and I will go into the Elements tab and notice that its showing the overlay right now.
So, my overlay.style, cause we'll be working with style sheets and then we'll change the position property of the styles to be absolute. Okay finally we'll modify the top property to be zero to begin with. And then I'll make this overlay have a background color. Now notice that whenever I do an attribute that normally would have a hyphen in CSS I need to camel case it. So, the b right here is lowercase and the C is uppercase. So, I'm going to create a background color and that's going to be equal to a rgba color because I want it to be partially transparent. And that can be just black plus 70% of the color, so that's going to be 70% black.
And then, I'm going to create the style of the cursor, to be a pointer. That'll be nice, so that when somebody clicks on this, it'll get the pointer. And they'll know that when they click on the image that we're going to insert here later, they can go back into the regular page. Alright, now we need to position this properly. So, I'm going to say re-size and position overlay and I'll start by modifying the width of my overlay. That's going to be equal to window inner width plus since this is CSS we have to include a measurement system here so that's going to be pixels. Alright so next I'll do the same thing my overlay style and then adjust the height. Be equal to the window, enter height plus the pixels. So, see that's working I am going to save this go back into my project refresh and I will click on one of these images.
Now notice that the overlay is working but is sitting at the very top. If I scroll all the way to top I can see it and that's not really what we want. We want it to follow along with the position of the window. So, we go back into the code and we need to add a couple of lines here, myoverlay.styletop is going to be equal to the window. And then page Y offset will be the offset from the top, plus the pixels and then same thing for the overlay style Left window.page X offset.
In this you got to be careful here about capitalizing properly, make sure this is a lower case right here. Now we got the adjustments for this scroll, we save this and go into our page on refresh, and when I click on these, notice that it's the proper height.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104560 Viewers
56 Video lessons · 116482 Viewers
71 Video lessons · 85687 Viewers
131 Video lessons · 41010 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.