Name: CSS and HTML 5 - Opacity for Text and Images
Uploaded: 2020-03-27T19:45:03.000Z
Duration: 15 min 20 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Adverbs of manner

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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

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

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