Start learning with our library of video tutorials taught by experts. Get started

CSS: Transitions and Transforms

Fading objects in and out


From:

CSS: Transitions and Transforms

with Joseph Lowery

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS: Transitions and Transforms
2h 25m Intermediate Jul 11, 2012

Viewers: in countries Watching now:

With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.

Topics include:
  • Understanding transition basics
  • Working with 2D and 3D transforms
  • Animating color changes
  • Fading objects
  • Changing the size of page elements and fonts
  • Transitioning multiple properties at the same time
  • Understanding keyframes and animations
  • Working in the z-index
  • Adding JavaScript interactivity
  • Crafting transitions in Dreamweaver
Subjects:
Web Web Design Web Development
Software:
CSS
Author:
Joseph Lowery

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.

There are currently no FAQs about CSS: Transitions and Transforms.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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