Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy and ended in his clients.

I'm going to show you how to use opacity at using CSS.

So this basically says whether or not you can see through something that you're putting into your HTML document.

So you will most likely have noticed this with images and especially with text overlay on images.

If you go to take a look at modern HTML documents, you go take a look in a modern HTML document, and there is a text overlay.

Usually usually you can see a little bit through the text that is overlaying the image.

So I showed in a previous class how you can overlay text over an image and have a background color if you don't use the opacity setting.

Basically, that text in the background.

Color is big and bold, and it's a little bit jarring, right.

You have this nice, pretty image in the background, and then you got this big, bold, jarring text.

So one of things you could do is you can use the opacity setting to basically make that text and make that background color just a little bit see through.

So it kind of meld into the image a little bit.

Makes the user experience a little bit better for the people that are going.

Be viewing your images with a text over life.

The other thing you can dio with the opaque setting is for things such as hover when people are going to your HTML document.

So let's say you have a gallery on.

The gallery has a whole bunch of different images that are hyperlinks.

Want one?

The things that you can do to improve the user experience is when people, when somebody basically hovers over one of those images, you can either make it more bold.

Or maybe you can tone it down a little bit, basically, just to show that this is the image that the person is hovering over so that they know what they're doing when they clicked on the image so that these were some of the things you could be thinking about with the capacity setting with CSS.

So with that, let's go to the computer and I can show you how capacity works in CSS on your HTML documents.

So here we are, back in my demonstration machine again, I'm using a Mac book, so I used text it in order to write this code.

But all you need is a basic asking text editor.

So if you're on the windows world, you can use no pad and the macro use text at it.

If you're in the legs rolled, you can use g et it nano them whatever you want.

We have two files today.

So for the style sheet, we have something called opacity style dot C S s on then, for the HTML document.

This is what will actually be opening up with the Web browser.

I just have this called opacity dot html.

This could be called whatever you want, as long as it ends with either dot ht m or dot html.

Now, before actually go and take a look at the code that I wrote today.

Let's go at first and take a look at the demonstration.

So basically, this is the demonstration web page that I've created on.

So the first thing that I did is I've just shown you what?

The opacity, different opacity levels due for an image s o for the first image that you're seeing here.

And this has no opacity.

So this is the normal image.

Then we go down to a 00.8 opacity, then we go down to a 0.5 opacity, and then we go down to a point to opacity.

So this just kind of shows you basically again how you can tone down image.

So if you're looking at an image like this thing like I don't know for for the page that I've created that seems a little break a little bit too bold.

Maybe you consent Glee, modify the images in opacity again.

Maybe you want something a little bit lighter or a little bit lighter, or maybe even like ghostly in the background.

Then, beyond that, we have basically opacity with just basic text.

So again, this is just where we're toning down text a little bit.

If that's the type of thing that you want to dio on, then finally we haven't image here or you have that see through text, see how with the text and the text of block, you can actually basically see through it a little bit.

Basically that that back image comes through again.

That's a little easier on the eyes.

The other thing that I've done here, which is kind of interesting, is basically I've used the hover in CSS.

So now when I hover over an image, it then has a 0.7 opacity.

So this first image at the top here, this has just no no opacity setting to begin with.

And when I hover over it, see, it dims down a little bit when I go to the 0.8 and then I hover over it.

It changes a little bit.

I go down here.

So with this, this here is actually a point to opacity normally.

So when I hover over it, it actually goes up to a 0.7 opacity.

And so again, this is a way you can have a little bit of user interactivity basically make your Web page.

It just a little bit dynamic using just basic CSS again, we come down here and then we go down to this final image here and again.

Imagine Imagine of this final image here is like in a gallery and you're using it as a link so somebody can hover over it and they know.

Okay, I know I'm hovering over this image, and then they click can click on it because that they have had more confidence there so that let's go over and take a look.

Little look at the code.

The first thing we'll do is we'll just take a look at the basic HTML code here.

There's not much to it again.

You're gonna open up the female, you're gonna open up the head, you're going to link to the style sheet.

The style sheet again we're using is opacity style dot C S s.

So you either put in the name for the style sheet here if it's in the same folder as HTML document, if it's in a different older than you would put in the full file path to the style sheep pen, it's that you're gonna close the head, you're gonna open the body and then basically, all I've done here is I have four.

I am G tags to the Emmett.

So I'm reusing that picture 700 j peg that I used for almost all of these examples the first time that I referenced that image.

I'm not going to do anything to it.

So basically, I'm not going to be mocked modifying the capacity I'm just going to be using whatever the CSS is for the image tag past that we're didn't going to use whatever we have for the image tag.

Plus, I'm going to have a class of opacity +08 then next, I'm gonna have a capacity of +05 that I'm gonna have a capacity of zero to.

So these air classes that I created within the style sheet and we'll take a look at that in a second that I haven't h one here.

The class is text opacity.

So basically, I just modified the class text opacity, then gets this gives you a bit of sea through text, then passed that we're going to go down, and basically, I'm going to create that image overland like I did in our previous example.

Eso for here.

I have a div of a class of text overlay.

So essentially I'm creating a canvas so that I can overlay the tech so I can add an image, an overlay, the text that I'm going to add the image.

So image SRC again, that same picture 700 like you normally use and then one haven't H two with a class of overlay hyphen title.

And so this is going to create that see through text that we're gonna be looking at.

So with that, let's go over and take a look at the CSS.

Maybe let's make a little bit more sense when you take a look at it.

And these are the classes that I created for this particular example.

So the first thing that I'm going to dio is I'm going to, uh, within CSS define the image tag or the I M g tag or the I am key element.

The first thing that I want to do is I want to restrict or you want to constrain the size of the image.

So I'm simply going to put it to wit of 100% and height to auto.

So what this means is when I simply put the image on the page.

It is going to fill up the entire Web browser, and then when I put the image within a div, it's going to fill up the depth.

So this is a way by simply putting 100%.

I could just very easily have that image dynamically resize itself to basically whatever container I'm putting it in.

Then pass that again, for I am t hover.

So we're using the image tag, the image element when I hover over it.

So this all has to be one thing.

So, so white space matters when you're doing this.

So you do.

I am G.

Cole and hover and sent.

Then all I'm simply doing here is I'm setting the opacity to 0.7 semicolons and closing.

So basically, what that means is when I hovered over an image, whatever its initial opacity is, when I hover over it, it will go to 0.7 s over here.

This image the open there there is no opacity setting.

So you get the full image right when I hover over it, tones it down a little bit.

On the other hand, with this image here.

This image, the default is an opacity of 0.2.

So when I hover over it, it actually makes it darker.

Um, so So there.

Then we go through.

When we take a look again, I created classes for opacity.

A class rapacity.

08 On simply.

I made this opacity eight opacity.

05 Here I set the opacity to 0.5.

Then here I did opacity 02 That puts the opacity to 0.2.

We go take a look.

That's the examples that we see here.

So this is the initial image.

This first images, the initial image without any opacity setting.

Then this is an opacity at 0.8 Then this one here is a capacity of 10.5, mrs and opacity of 0.2.

So that just gives you a basic example of what the opacity setting looks like.

They were going to go down here, a text opacity.

I simply set that to opacity 0.5 with the background color of gray.

And so again, we can take a look at this.

And this is what we get.

If you just have the text over over a plain background.

You're probably not going to see very much.

We can go here.

Maybe we can modify this a bit.

Yoda was 0.8 to file.

Do save.

We go here.

Refresh.

Now we can see it becomes a little bit darker.

So again, that gives you a little bit of an idea.

What's going on there past that.

We're then going to go down and again, we're going to do that text overlay.

So the first thing that we have to do for the text overlay is basically we have to create a dip.

We have to create a canvas that we're then going to put the image again, and then we're going to overlay the text over.

So that text overlay is it basically is just creating that canvas position is going to relative width is going to be 300 pixels, so that gives us the 300 pixel size here.

Then the height is going to be auto margin Hyphen left his auto market hyphen right is auto.

All that's going to do is then center the image, all right, so that is basically creating the campus for us.

So that's creating a div that we can then put the image in, then within the HTML.

Right?

So we have this Div.

So that's what we created here with his class.

We then put the image in.

We then are going to write Text is going to then have the class of overlay title.

So I'm gonna go take a look at the class of overlay title position here is going to be absolute because position basically, with this we have to say where we're going to start writing a text.

We're going to start right in a text from zero pixels from the top and 16 pixels fromthe left basically for the default for whatever tag we're using for H one theme color is going be black.

The background color is going to be like Ray.

But here what we did different than the example that I showed you before with overlaying Tax is now we're going to have an opacity of 0.7 by having the capacity of the 0.7 when we go and we take a look up when we go in, we take a look at the text.

We can see that it's now a little bit see through again.

It's not so jarring.

Uh, if I g o and let's say I took away that opacity.

So let's say we d'oh!

And instead of having the capacity of 0.7, I simply got rid of the opacity I file.

I save when we go back, right?

That's how the textbooks now, when I refresh now, you can see it's kind of bold, bright right in your face.

It doesn't feed.

It doesn't feel like it seamlessly integrates with the image underneath.

So that's one of the reasons opacity can be very valuable for doing text over lies.

So that's it basic example of how the opacity works again.

The basic the syntax for it is simply opacity colon and then 11 Basically, you can't see through it all.

Zero you can completely see through it.

So again you can go 0.20 point 50.80 point seven.

So on and so forth you figure out what looks best for whatever it is that you're trying to d'oh!

And again, one of the cool things you can do with this is using things like hover.

Basically, that's away Thio.

So that the image or whatever somebody is hovering over can be defined a little bit more easily.

So now you know how to use opacity with CSS again.

This could be a very valuable for you if you're doing image galleries that are gonna be links so people can simply, you know, scroll through, they can hover over an image.