This is Sasha and welcome to another training video on CSS where I share with you how to edit and modify your business website when it comes to CSS or if you want to learn a little bit of CSS then this is what we’ll cover in this video. Now today, what we’re going to do is look at the opacity property. Let’s take a look at how this works.
Using The Opacity Property For Images
Here what I’ve done is got an image from Pixabay, and I have a model right here. Now, I like the opacity property when it comes to using it within CSS. I typically use it for things like a menu, headers and stuff like that. But people also use it when it comes to images.
What you might have seen over the past is let’s say if you type in opacity and we do – again, this is a percent value, so if you do 0.5, that means 50% opaque or 50% transparent. You can see since I’ve targeted an image, it affects both of these.
If I want it only to happen as I roll the mouse over, I could add that pseudo class of hover, and now I go ahead, and as that’s refreshed, you can see as I roll over, there it is, the opacity gets changed.
--------------------- HTML CODE ------------------
The other thing you could do is since you noticed when I roll over, the mouse doesn’t change there. I could use one of those cursor properties and do a thing like a pointer so that’s another property that I could do and so you can see now as I roll over it, I have a cursor or a little hand. The other thing that I could do is do a short transition, and a transition is where, you know, it fades in a little bit.
What we could do is do like 0.7 seconds and we ease, okay? Watch how nice this actually starts looking. As I roll over and roll out, you know, you can see how it – right there as I roll in, it eases into that. Now, when I roll out, it doesn’t work very well but you can see how the opacity works. If I go to 0.2 then you can see the opacity is only 20% transparent. Basically, 80% of it is white. You’re seeing that background right there.
--------------------- HTML CODE ------------------
If I added a background to the body, let’s just say body background, we’ll do pink. You’ll be able to see this come through. You can see how that shows the background. It’s making it transparent, 80% transparent in fact, because you’re only giving it 20% opaque. If I do 0.8, watch what happens. You barely see it but it’s very subtle. You can see that little bit of a difference. If I do 0.7, okay, I’ll give you an example, you can see again.
--------------------- HTML CODE ------------------
In either case, that’s how it works in order to give you a little bit of effect or transparent effect that’s really good for things that have roll overs for buttons and all kinds of things like that but you can also use it for images on the roll overs that some websites used. There you go, that’s the opacity property.
