Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Fading a page element in and out requires by definition a transition, otherwise, the element would just appear and disappear. One of the almost 50 CSS properties supported by transitions is just what the doctor ordered for fading: opacity. In this movie I'll show you how to take an existing visible element and interactively fade it in and out. Let's look at our before and after version of the page we're going to be working on. The element in question are these SOLD and AVAILABLE labels below each painting, so I'll scroll down to the middle of the page, so you can get a better idea of what I'm talking about.
For older browsers this display of SOLD or AVAILABLE is okay, but for modern browsers, we want to clean up the display a bit and make it more interactive. So let me switch to the after depiction, and I'll scroll down, and now you'll notice that there is no SOLD or AVAILABLE label until I hover over an item and it fades up. Now if hover off into another painting, that one fades out. All right! Let's a look at how these elements are coded to see what we'll need to do.
So I'm going to switch over to my code editor, where I have open spotlight.htm from the Chapter 2/02_02 folder, and I've scrolled down a bit to the articles section with the ID of spotlight, and I see there, starting on line 34, a series of divs, each with a class of artwork. Within those divs are the images that we were looking at, as well as another div like the one on line 37 with a class of status. That has an h3 tag with the text SOLD--or as you see on line 48, AVAILABLE.
So what we're going to doing is manipulating the status class--that's the div that contains the label--as well as its content. Let's switch over to the CSS stylesheet, main.css, that is linked to spotlight.htm And what we're going to need to do is to create three rules, the first of which addresses the class of status. So I'm going to scroll down towards the bottom of the page, and right around the bottom I see a series of status widths. This helps in the sizing of the labels.
So I'm going to make a little extra room here and then put in my first rule, which as I said addresses the class of status. And the first thing we're going to need to do is use the position: absolute property in order to place it exactly where we want it on each of the paintings. Next I'll enter in my top property, and I'll set that to 0, because I want the status class to completely cover the painting. So the next property I need to enter is a height of 100%. Now we want this to cover the entire painting, because we're going to trigger the transition by using the hover state applied to the status class.
So first we need to set the opacity so that you can't see it, and for that we'll enter in an opacity property set to 0. All right. We're ready to enter in our transitions, so I'll start out with my WebKit specific transition, and again, I'll use the shorthand by putting in the property of opacity, a duration of 1 second and timing function of ease-in. Now let's copy this declaration, and then I'll paste it four times. Let's change the second -webkit to -moz, the third -webkit to -o, and then get rid of the fourth one altogether.
Now we're ready to create a rule for the h3 that's within the status div. So I enter in my class of status and h3 tag, open up the curly braces and put in a margin-top value of 40 pixels so that the label appears at the same position on all the paintings. Now I want to enter in a little bit of padding on the top and the bottom so that my text doesn't hug the background color. Next so I'll add in our purple background- color that we've been using throughout the site, and I'll set that as an RGB value of 168, 88, 163.
Next, we're going to need to change the color of the text so that it stands out nicely against the purple, and let's make our text color white, and we want to center it. So I'll use text-align: center. Finally, let's reset the opacity on hover so our transition will have something to do. So we'll enter in the class of status and the state of hover and the only property we need here is opacity, and we'll set that to .8, okay. Let's save our stylesheet and see how it looks in the browser.
Let's go back to our original before file that we've been working with. I'll press Reload, and when I do the AVAILABLE and SOLD labels disappear and reappear when I hover over any of the paintings. Now, the page is much neater, the focus is on the artwork, and if someone is interested in the work, they can easily find out whether it's available or not. I think you'll find as you begin to work with opacity, but there are many situations where you can take advantage of its ability to fade objects in and out.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.