The Transition Challenge Solution2:22 with Guil Hernandez
In this video, you'll learn one way to create the photo overlay transition.
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
.1s, for example, can be too fast for users to perceive.
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