Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, the preview photo area over on the right-hand side is going to be anchor links. We are going to have just anchor links in that right side. We are going to set the background image to be the preview JPEG, but we are going to put that in through an inline style. So, I am going to start by getting rid of the img text over here in the image preview, and then we are going to create CCS rules in order to style these. Let's come over and create a new CSS rule, Compound selection, choose Less Specific.
We are going to do gallery_preview, space a, any anchor links inside of there. Let's choose OK. Box properties: 375 x 375. We are going to say 0 margin and padding. We are going to come over to the Block settings. Since we are going to be putting anchor links in here, those have a display type of inline. Let's change that to block.
And lastly, let's come over to the Border. We are going to select a solid, 1-pixel, medium gray border. Then we are going to click OK. We'll create one more, .gallery_ preview a:hover. What happens when we roll over the anchor links on the right? Let's click OK.
Border, we are going to set the color to white. Click OK. Now that we have our CSS rules in place for the anchor links, we are going to put in the preview area. In the next movie, we are going to start by creating anchor links in the preview area, based on the thumbnail you clicked on the left-hand side.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100182 Viewers
56 Video lessons · 113185 Viewers
71 Video lessons · 82055 Viewers
131 Video lessons · 39373 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.