Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Fading objects in and out

From: CSS: Transitions and Transforms

Video: Fading objects in and out

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.

Fading objects in and out

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.

Show transcript

This video is part of

Image for CSS: Transitions and Transforms
CSS: Transitions and Transforms

26 video lessons · 14302 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Transitions and Transforms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.