We can define a level of transparency or opaqueness of an image using the opacity declaration before
we begin.
Set up your basic HMO structure and save the file is opacity dot HMO
once you've set up your basic HMO structure.
Create an open and close div tag within your body tags
now will insert an image into this div once the image is inserted.
We can adjust the opacity of the image
the image can be found in the downloads folder corresponding to this lecture
next.
We need to set up our style sheet
inside the style sheet.
Enter the following declaration.
This is the opacity style declaration and the zero point four will set the opacity of any image in our
document to 40 percent let's go ahead and take a look.
Save the file and preview it in your web browser
and this is the image with the opacity set at 40 percent.
Let's set it at 90 percent to see the difference it makes
and that's the opacity of 90 percent
we can add additional effects using the opacity declaration as well.
Let's create a hover effect so that the image changes from 40 percent to 100 percent opacity when your
mouse is hovered on top of the image to do that.
Add the following declaration
also change the original opacity declaration to back to 40 percent
now save your file and refresh your browser and as you can see when we hover our mouse over the image
it changes to 100 percent capacity and when we remove the mouse it changes back to 40 percent opacity.