Using CSS3’s Opacity Property

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

Join us in our newest publication:
  1. img{
  2. opacity: .6;
  3. }

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.

  1. img:hover{
  2. opacity: .6;
  3. }

Share and Enjoy !

0 0