Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
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
the photo overlay containing the image title and description.
So first I'll delete the example img : hover rule I wrote in the previous video.
Then right below the photo overlay transitions comment I'm going to initially
hide the photo overlay by selecting the class photo dash
overlay and setting its opacity to zero.
Then I'll create a new rule that targets photo overlay on hover.
And here I'll set the opacity value to 1.
Finally I'll add a little transition magic to this hover interactaction.
I want the transition to happen on both hover on and off, so
I'll write the transition property and
transition duration properties here in the photo overlay rule.
So, first, let's say transition property and set the value to opacity.
Then I'll say transition duration, and let's set the duration to 0.5 seconds.
Now, I set my transition duration to 0.5 seconds, but yours can be different.
I don't wanna make users wait too long for visual feedback.
For instance, a duration value of two seconds or longer seems like a long
time for the image title and description to fade in and fade out.
Long durations like this can also make your site interaction seem
less responsive and sluggish.
And you also don't want to make the transitions so
fast that users can't see it.
A transition of 0.2 seconds or 0.1 second for
example, can be too fast for users to perceive.
So it's important to keep this in mind when creating your transitions.
I'll go ahead and set my duration to 0.5 seconds.
You need to sign up for Treehouse in order to download course files.Sign up