1
00:00:00,000 --> 00:00:04,522
Now that you're familiar with
translations and CSS transforms,

2
00:00:04,522 --> 00:00:09,287
we're gonna use translate to create
a neat interaction feature using

3
00:00:09,287 --> 00:00:11,722
the three images on the bottom row.

4
00:00:11,722 --> 00:00:17,316
For these three images, I've added
a class of slide to the photo wrapper and

5
00:00:17,316 --> 00:00:21,775
photo overlay containing the image title,
description and

6
00:00:21,775 --> 00:00:26,342
Download button has an opaque
blue colored background area.

7
00:00:26,342 --> 00:00:30,362
Now currently, these blue overlays
are positioned on top of the images.

8
00:00:30,362 --> 00:00:32,662
So, we're not able to see the images yet.

9
00:00:32,662 --> 00:00:37,210
So, we're going to use
the translateX function to position

10
00:00:37,210 --> 00:00:41,862
the overlay area out of view and
initially display the image.

11
00:00:41,862 --> 00:00:45,999
Then when a user hovers over
the slide container the title,

12
00:00:45,999 --> 00:00:49,889
description and
button will slide in from the left while

13
00:00:49,889 --> 00:00:54,042
the image slides out of view
from left to right, like this.

14
00:00:57,222 --> 00:01:01,384
So for this to happen,
we need to transition the image and

15
00:01:01,384 --> 00:01:03,042
photo-overlay div.

16
00:01:03,042 --> 00:01:09,736
So back in interactions.css, I'll scroll
down here to the row three comment and

17
00:01:09,736 --> 00:01:14,878
I'll create a new rule that
targets the photo-overlay div and

18
00:01:14,878 --> 00:01:17,022
the images inside slide.

19
00:01:28,602 --> 00:01:34,030
Inside this new rule, I'll add
the transition shorthand property and

20
00:01:34,030 --> 00:01:37,920
I'll set transform as
the transition property and

21
00:01:37,920 --> 00:01:41,642
the transition duration
value to .6 seconds.

22
00:01:41,642 --> 00:01:45,081
Let's also add a timing
function of ease out.

23
00:01:47,142 --> 00:01:50,122
So now, let's create the transforms.

24
00:01:50,122 --> 00:01:55,309
Right below this rule,
I'll create a new rule

25
00:01:55,309 --> 00:02:01,161
that targets the photo-overlay
div inside slide,

26
00:02:01,161 --> 00:02:05,816
then I'll add the transform property and

27
00:02:05,816 --> 00:02:10,742
I want to use the translateX
function here.

28
00:02:10,742 --> 00:02:17,022
And inside the parenthesis,
I'll set the value to (-100%).

29
00:02:17,022 --> 00:02:21,003
Once we refresh,
you can see how this pulls

30
00:02:21,003 --> 00:02:25,000
the blue overlay div 100% to its left.

31
00:02:25,000 --> 00:02:28,697
And since the slide elements
overflow is set to hidden,

32
00:02:28,697 --> 00:02:31,852
that blue overlays now
completely out of view.

33
00:02:31,852 --> 00:02:37,009
So to slide it back into view on hover,
I'm going to create

34
00:02:37,009 --> 00:02:43,772
a new rule that targets photo overlay
when a user hovers over that slide div.

35
00:02:43,772 --> 00:02:50,332
So I'll type slide:hover,
then the photo-overlay class.

36
00:02:53,752 --> 00:02:56,072
I'll add a transform property.

37
00:02:56,072 --> 00:02:59,443
Then to slide the photo
overlay back in to view,

38
00:02:59,443 --> 00:03:04,432
I'm going to use the translateX
function and set the value to (0).

39
00:03:08,352 --> 00:03:09,332
So, great.

40
00:03:09,332 --> 00:03:14,853
Now, the photo-overlay slides
back to its original position.

41
00:03:14,853 --> 00:03:19,058
Now finally,
I want an image to slide to the right and

42
00:03:19,058 --> 00:03:23,272
out of view as the blue
overlay is sliding into view.

43
00:03:25,312 --> 00:03:30,249
Back in my style sheet,
I'll create a new rule that targets

44
00:03:30,249 --> 00:03:35,692
images inside the slide div once
a user hovers over the slide div.

45
00:03:40,372 --> 00:03:43,302
Then I'll add the transform property and

46
00:03:43,302 --> 00:03:48,332
what do you think our translate
function should look like for this one?

47
00:03:48,332 --> 00:03:53,575
For the image to slide to the right and
out of view on hover,

48
00:03:53,575 --> 00:04:00,112
I want to use the translateX function and
set the value to (100%).

49
00:04:00,112 --> 00:04:02,292
So, let's take a look.

50
00:04:02,292 --> 00:04:07,312
One side refresh the page and
hover over an image, great.

51
00:04:07,312 --> 00:04:12,726
The images slide 100% to the right
of their original space and

52
00:04:12,726 --> 00:04:18,252
out of view while the overlay content
area slides in from the left.

53
00:04:22,252 --> 00:04:27,035
In this video, you learn that translate
gives you a different way to position and

54
00:04:27,035 --> 00:04:28,452
move content on a page.

55
00:04:28,452 --> 00:04:31,952
It's a method similar to relative and
absolute position.

56
00:04:31,952 --> 00:04:35,814
So, then when do we use positioning
offsets instead of translate and

57
00:04:35,814 --> 00:04:38,552
how do we know which method
is more appropriate?

58
00:04:38,552 --> 00:04:41,752
CSS transforms
are a design-specific feature.

59
00:04:41,752 --> 00:04:44,252
And generally,
used to enhance your content.

60
00:04:44,252 --> 00:04:48,689
So, it's best to use the translate
functions over positioning offsets when

61
00:04:48,689 --> 00:04:50,873
you wanna move elements on the page for

62
00:04:50,873 --> 00:04:54,572
a design-specific reason like
to enhance user interactions.

63
00:04:54,572 --> 00:04:59,132
Now CSS position offset are
layout-specific properties used to control

64
00:04:59,132 --> 00:05:02,012
your layout and
the position of your content.

65
00:05:02,012 --> 00:05:06,865
In our image gallery, we're using
the translateX function to shift elements

66
00:05:06,865 --> 00:05:10,992
away from their current position
when a user interacts with them.

67
00:05:10,992 --> 00:05:14,760
So you can say that this is
a design-specific motion, so

68
00:05:14,760 --> 00:05:16,732
translate is better suited.

69
00:05:16,732 --> 00:05:20,732
With a translate function, it's also
possible to achieve better performance

70
00:05:20,732 --> 00:05:22,652
in most desktop and mobile browsers.

71
00:05:22,652 --> 00:05:27,448
Translate can take advantage of a browser
feature called hardware acceleration to

72
00:05:27,448 --> 00:05:32,252
help the transition run smoother than
a transition made with position opposites.

73
00:05:32,252 --> 00:05:35,758
You can learn more about hardware
acceleration and CSS transforms by

74
00:05:35,758 --> 00:05:39,215
visiting the links provided in
the teacher's notes of this video.