Using CSS3’s Opacity Property

Published July 5, 2016 by CSS Newbies.

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:

Screen Shot 2016-07-05 at 10.24.58 AM

opacity: .6;

Screen Shot 2016-07-05 at 10.25.15 AM

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.

opacity: .6;

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>