1
00:00:00,340 --> 00:00:04,770
In this short video I'm going to show you
one way to create this transition for

2
00:00:04,770 --> 00:00:08,200
the photo overlay containing
the image title and description.

3
00:00:09,550 --> 00:00:15,670
So first I'll delete the example img :
hover rule I wrote in the previous video.

4
00:00:15,670 --> 00:00:21,350
Then right below the photo overlay
transitions comment I'm going to initially

5
00:00:21,350 --> 00:00:26,400
hide the photo overlay by
selecting the class photo dash

6
00:00:26,400 --> 00:00:31,390
overlay and setting its opacity to zero.

7
00:00:37,327 --> 00:00:41,610
Then I'll create a new rule that
targets photo overlay on hover.

8
00:00:41,610 --> 00:00:44,993
And here I'll set the opacity value to 1.

9
00:00:50,170 --> 00:00:54,495
Finally I'll add a little transition
magic to this hover interactaction.

10
00:00:56,450 --> 00:01:00,860
I want the transition to happen
on both hover on and off, so

11
00:01:00,860 --> 00:01:03,390
I'll write the transition property and

12
00:01:03,390 --> 00:01:08,320
transition duration properties
here in the photo overlay rule.

13
00:01:08,320 --> 00:01:15,690
So, first, let's say transition
property and set the value to opacity.

14
00:01:17,050 --> 00:01:24,130
Then I'll say transition duration, and
let's set the duration to 0.5 seconds.

15
00:01:27,050 --> 00:01:32,160
Now, I set my transition duration to 0.5
seconds, but yours can be different.

16
00:01:32,160 --> 00:01:35,800
I don't wanna make users wait too long for
visual feedback.

17
00:01:35,800 --> 00:01:40,490
For instance, a duration value of two
seconds or longer seems like a long

18
00:01:40,490 --> 00:01:46,080
time for the image title and
description to fade in and fade out.

19
00:01:46,080 --> 00:01:49,590
Long durations like this can also
make your site interaction seem

20
00:01:49,590 --> 00:01:51,250
less responsive and sluggish.

21
00:01:54,801 --> 00:01:57,867
And you also don't want to
make the transitions so

22
00:01:57,867 --> 00:01:59,770
fast that users can't see it.

23
00:01:59,770 --> 00:02:04,460
A transition of 0.2 seconds or
0.1 second for

24
00:02:04,460 --> 00:02:08,670
example, can be too fast for
users to perceive.

25
00:02:08,670 --> 00:02:12,790
So it's important to keep this in
mind when creating your transitions.

26
00:02:12,790 --> 00:02:18,400
I'll go ahead and
set my duration to 0.5 seconds.