1 00:00:00,320 --> 00:00:04,410 One of the most commonly used CSS transformations is scale. 2 00:00:04,410 --> 00:00:09,980 You can increase or decrease the size of elements on the x or y axis 3 00:00:09,980 --> 00:00:15,360 using scale functions like scale X and scale Y. 4 00:00:15,360 --> 00:00:20,760 But most of the time, you're going to use the scale shorthand function 5 00:00:20,760 --> 00:00:24,620 to evenly scale elements horizontally and vertically. 6 00:00:24,620 --> 00:00:26,060 Like in this example. 7 00:00:26,060 --> 00:00:30,530 So notice how the div scales twice as large when we hover over it. 8 00:00:33,109 --> 00:00:37,770 So first I want to scale the size of my images on hover. 9 00:00:37,770 --> 00:00:43,610 I'll go back to interactions .css and scroll down to the image 10 00:00:43,610 --> 00:00:48,880 hover rule here and I'll change the transform function to the scale function. 11 00:00:48,880 --> 00:00:53,110 Now applying a basic skill transformation is pretty straight forward. 12 00:00:53,110 --> 00:00:58,160 Inside the parenthesis you write a number that instructs the browser how large 13 00:00:58,160 --> 00:01:04,020 the scale and element So the default value for scale is 1. 14 00:01:04,020 --> 00:01:07,080 Which is equivalent to no scaling. 15 00:01:07,080 --> 00:01:13,280 Now if I want to make the images twice as large I can write 2 as the scale value. 16 00:01:15,640 --> 00:01:21,290 So now the images zoom out from the center without affecting the rest of the content. 17 00:01:21,290 --> 00:01:24,800 They scale evenly both vertically and horizontally. 18 00:01:24,800 --> 00:01:27,770 So their width and height are now twice as big. 19 00:01:28,880 --> 00:01:35,990 Now a value like 1.5 will make the images 1.5 times larger on hover. 20 00:01:38,883 --> 00:01:44,160 The scale function also accepts a second number value inside the parentheses. 21 00:01:44,160 --> 00:01:50,920 Now, two values let you individually scale the horizontal and vertical dimensions. 22 00:01:50,920 --> 00:01:54,710 You write the scaling value for x first, 23 00:01:54,710 --> 00:01:59,090 followed by a comma, and then the scaling value for y. 24 00:01:59,090 --> 00:02:02,490 So let's make the y value 2. 25 00:02:02,490 --> 00:02:08,405 So once we refresh the browser and hover over an image, the first value of 26 00:02:08,405 --> 00:02:14,700 1.5 scales the width of the images, while the second value of 2 scales the height. 27 00:02:14,700 --> 00:02:19,420 So now unhovered, the images are 1.5 whiter and twice as tall. 28 00:02:21,870 --> 00:02:26,270 Now when you apply a scale to an image you should make sure that the original 29 00:02:26,270 --> 00:02:29,600 dimensions of the images is written in your HTML 30 00:02:29,600 --> 00:02:33,000 are larger than the size at which you're going to scale them. 31 00:02:34,030 --> 00:02:38,550 That way you can safely scale your images while maintaining their quality. 32 00:02:38,550 --> 00:02:42,300 Now the best and most visually appealing solution for 33 00:02:42,300 --> 00:02:48,045 my image gallery Is one small scale value like 1.1. 34 00:02:53,085 --> 00:02:58,519 Much better, so as you've seen, the spot at which an element scales and 35 00:02:58,519 --> 00:03:03,740 rotates is the exact same center of the element by default. 36 00:03:03,740 --> 00:03:07,197 In the next video you'll learn how to change the spot to scale or 37 00:03:07,197 --> 00:03:12,170 rotate elements from other areas, like the top-left corner or bottom-right corners.