Using CSS3’s Opacity Property

Datetime:2016-08-23 03:06:15          Topic: CSS3           Share

With CSS, any HTML element can become (slightly or completely) transparent. The opacity property controls how opaque an element is, and it takes values between 0 and 1. So if you have an image that you want to be slightly transparent, all you need to do is determine how transparent you want it to be and apply a value between 0 (completely transparent) and 1 (completely opaque) using the opacity property, like this:

img{
opacity: .6;
}

As you can see, after the opacity is defined as .6, the image has become much more transparent. A common (and cool) use for this property is when creating hover effects. Having an image become slightly opaque on hover is a common design trend that is easy to apply using the opacity property.

img:hover{
opacity: .6;
}




About List