img{
opacity: 0.5;
}
img:hover{
opacity: 0.5;
}
				
			

Video Summary

Alright, in this section, we are talking about transparent images. And we’re going to use the opacity property to be able to set up the transparent images that we want. If you think about what we’re doing when we’re using fonts, and we’re using the hovers with a hover pseudo-class, to be able when you hover over that link that it will change little color, so that way you would get a good understanding of that this link has an action. And we do the same thing with images. So let’s just hop over to code Pen and start playing around and remember to is that opacity values can only be between point 01 And one, zero just doesn’t show the image. But if you want to have it super light, you could have it as point 01. 

All right, so when we come over here, I am using just the image tag and I just found a cool image that I found off of Google. So if we come over here, we can go to Image, and let’s just go opacity and now what we can do is let’s just put in point five and now we have that as point five. So what I want to do now is let’s go in and add this as a hover effect. 

So now when we hover over it, it changes color. Maybe you don’t want to be that transparent. Maybe you just want it just slightly so maybe we do point nine five there’s still very I don’t know it’s very subtle, maybe. Point 8.8 is a solid if you hover over it, you still see the image very well. And now that if you want to have this image clickable. Now, everyone who’s using this will know that this is a clickable link. On to the next section.