1
00:00:00,780 --> 00:00:07,730
We can define a level of transparency or opaqueness of an image using the opacity declaration before

2
00:00:07,730 --> 00:00:08,880
we begin.

3
00:00:08,920 --> 00:00:14,720
Set up your basic HMO structure and save the file is opacity dot HMO

4
00:00:18,510 --> 00:00:21,520
once you've set up your basic HMO structure.

5
00:00:21,930 --> 00:00:26,400
Create an open and close div tag within your body tags

6
00:00:33,480 --> 00:00:37,700
now will insert an image into this div once the image is inserted.

7
00:00:37,740 --> 00:00:39,780
We can adjust the opacity of the image

8
00:00:42,960 --> 00:00:46,650
the image can be found in the downloads folder corresponding to this lecture

9
00:00:59,380 --> 00:00:59,820
next.

10
00:00:59,830 --> 00:01:01,390
We need to set up our style sheet

11
00:01:08,200 --> 00:01:09,360
inside the style sheet.

12
00:01:09,370 --> 00:01:16,590
Enter the following declaration.

13
00:01:16,600 --> 00:01:24,520
This is the opacity style declaration and the zero point four will set the opacity of any image in our

14
00:01:24,520 --> 00:01:30,610
document to 40 percent let's go ahead and take a look.

15
00:01:30,760 --> 00:01:34,270
Save the file and preview it in your web browser

16
00:01:40,080 --> 00:01:44,850
and this is the image with the opacity set at 40 percent.

17
00:01:44,970 --> 00:01:47,760
Let's set it at 90 percent to see the difference it makes

18
00:01:55,330 --> 00:01:57,300
and that's the opacity of 90 percent

19
00:02:05,500 --> 00:02:09,770
we can add additional effects using the opacity declaration as well.

20
00:02:09,940 --> 00:02:18,460
Let's create a hover effect so that the image changes from 40 percent to 100 percent opacity when your

21
00:02:18,460 --> 00:02:22,000
mouse is hovered on top of the image to do that.

22
00:02:22,000 --> 00:02:23,410
Add the following declaration

23
00:02:28,340 --> 00:02:32,680
also change the original opacity declaration to back to 40 percent

24
00:02:35,420 --> 00:02:44,290
now save your file and refresh your browser and as you can see when we hover our mouse over the image

25
00:02:45,100 --> 00:02:51,850
it changes to 100 percent capacity and when we remove the mouse it changes back to 40 percent opacity.