- Getting to Know Transitions and Transforms 2:34
- Creating Your First Transition with transition-duration 8:45
- Transitioning Specific Properties with transition-property 2:54
- Transition Challenge 2 objectives
- Animatable CSS Properties 3:34
- The Transition Challenge Solution 2:22
- Transitioning Multiple Properties 5:09
- Transitioning Multiple Properties 2 objectives
- Review: Getting Started with CSS Transitions 7 questions
Preview
Video Player
00:00
00:00
The Transition Challenge Solution
2:22In this video, you'll learn one way to create the photo overlay transition.
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