1
00:00:00,160 --> 00:00:04,010
So, next I'm gonna change the fill
color of the hammer and heart icon.

2
00:00:04,010 --> 00:00:09,440
So, back in my style sheet, under
the hammer comment, I'll create a new rule

3
00:00:09,440 --> 00:00:15,950
that targets the class hammer-bg on hover.

4
00:00:15,950 --> 00:00:19,890
I'll add a fill property,
then set a color to

5
00:00:19,890 --> 00:00:24,340
a light shade of orange
with a hex value feae6e.

6
00:00:24,340 --> 00:00:29,128
So, then under the comment for heart,

7
00:00:29,128 --> 00:00:35,377
I'm going to target
the class heart-bg on hover.

8
00:00:40,437 --> 00:00:45,457
And on hover, I'm going to set the heart
icon's fill color to a lighter red.

9
00:00:45,457 --> 00:00:50,857
So, I'll set the fill value to ff5e5e.

10
00:00:55,837 --> 00:01:01,005
So, the circle background elements will
all share the same transition values.

11
00:01:01,005 --> 00:01:05,405
So, I'm going to group all three
background selectors into one rule,

12
00:01:05,405 --> 00:01:07,125
to make my CSS drier.

13
00:01:07,125 --> 00:01:11,965
So I'll scroll up to my base styles and
I'll target all three classes.

14
00:01:11,965 --> 00:01:18,832
So, first I'll target the class
gear-bg then I'll target

15
00:01:18,832 --> 00:01:24,101
.hammer-bg, and finally, .heart-bg.

16
00:01:24,101 --> 00:01:26,160
Then I'll scroll down and

17
00:01:26,160 --> 00:01:30,670
cut the transition declaration
out of the .gear-bg rule.

18
00:01:30,670 --> 00:01:33,370
Then delete the rule altogether.

19
00:01:36,611 --> 00:01:41,180
All right, so in my new rule,
I'll paste in the transition declaration.

20
00:01:45,280 --> 00:01:49,730
So, when I save my syle sheet and
take a look at my icons in the preview,

21
00:01:49,730 --> 00:01:54,680
we can see that now all three icons
have a smooth fill transition on hover.

22
00:01:56,290 --> 00:01:58,940
So, let's transition
one more SVG property.

23
00:01:58,940 --> 00:02:05,140
I want to add a nice outline or stroke
around the hammer background on hover.

24
00:02:06,260 --> 00:02:10,240
Back in my style sheet,
under the hammer comment,

25
00:02:10,240 --> 00:02:15,969
I'm going to create a new rule
that targets the class hammer-bg.

26
00:02:17,420 --> 00:02:22,300
Then I'll add a stroke property
to define a stroke color, and

27
00:02:22,300 --> 00:02:28,160
set the value to a shade of
yellow with the hex value fee16e.

28
00:02:29,500 --> 00:02:33,060
Finally, to increase the width
of the element stroke on hover,

29
00:02:33,060 --> 00:02:37,820
I'm going to add another
SVG only CSS property.

30
00:02:37,820 --> 00:02:40,931
Named stroke-width inside the hover rule.

31
00:02:44,731 --> 00:02:49,350
And I'm going to set
the stroke-width value to eight.

32
00:02:49,350 --> 00:02:51,140
So let's take a look.

33
00:02:51,140 --> 00:02:54,950
Once I save my style sheet and
refresh the preview, as you can see,

34
00:02:54,950 --> 00:02:59,950
it transitions the stroke width
from one to eight pixels on hover.

35
00:02:59,950 --> 00:03:04,940
You can use CSS units, like pixels,
amps, and percentages with SVG, but

36
00:03:04,940 --> 00:03:06,060
pixels are standard.

37
00:03:06,060 --> 00:03:10,560
In fact,
you don't even need to add the pixel unit

38
00:03:10,560 --> 00:03:12,440
if you want to assign a pixel value.

39
00:03:12,440 --> 00:03:14,300
If you write a unit list value,

40
00:03:14,300 --> 00:03:17,700
the value's assumed to be equal
to the same value in pixels.

41
00:03:17,700 --> 00:03:21,790
In other words,
if the stroke width here is set to eight,

42
00:03:21,790 --> 00:03:24,740
it means the same thing
as writing eight pixels.

43
00:03:24,740 --> 00:03:26,630
So pretty simple, right?

44
00:03:26,630 --> 00:03:30,030
So far, it's just like transitioning
regular HTML elements,

45
00:03:30,030 --> 00:03:32,480
except we're using SVG properties.

46
00:03:32,480 --> 00:03:35,350
Now, if you wanna learn
more about CSS transitions,

47
00:03:35,350 --> 00:03:38,130
check out the teacher's notes for
links to related videos.