Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Transitions and Transforms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Transition Challenge Solution

2:22 with Guil Hernandez

In this video, you'll learn one way to create the photo overlay transition.

Video review

It's best not to make users wait too long for visual feedback. For instance, a duration value of 2s or longer seems like a long time for the image title and description to fade in. Long durations like this can make your site interactions feel less responsive and sluggish.

You also don't want to make the transition so fast that users can't see it. A transition of .2s or .1s, for example, can be too fast for users to perceive.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In this short video I'm going to show you one way to create this transition for 0:00
    the photo overlay containing the image title and description. 0:04
    So first I'll delete the example img : hover rule I wrote in the previous video. 0:09
    Then right below the photo overlay transitions comment I'm going to initially 0:15
    hide the photo overlay by selecting the class photo dash 0:21
    overlay and setting its opacity to zero. 0:26
    Then I'll create a new rule that targets photo overlay on hover. 0:37
    And here I'll set the opacity value to 1. 0:41
    Finally I'll add a little transition magic to this hover interactaction. 0:50
    I want the transition to happen on both hover on and off, so 0:56
    I'll write the transition property and 1:00
    transition duration properties here in the photo overlay rule. 1:03
    So, first, let's say transition property and set the value to opacity. 1:08
    Then I'll say transition duration, and let's set the duration to 0.5 seconds. 1:17
    Now, I set my transition duration to 0.5 seconds, but yours can be different. 1:27
    I don't wanna make users wait too long for visual feedback. 1:32
    For instance, a duration value of two seconds or longer seems like a long 1:35
    time for the image title and description to fade in and fade out. 1:40
    Long durations like this can also make your site interaction seem 1:46
    less responsive and sluggish. 1:49
    And you also don't want to make the transitions so 1:54
    fast that users can't see it. 1:57
    A transition of 0.2 seconds or 0.1 second for 1:59
    example, can be too fast for users to perceive. 2:04
    So it's important to keep this in mind when creating your transitions. 2:08
    I'll go ahead and set my duration to 0.5 seconds. 2:12

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up