The opacity property of CSS3 is a great tool that help us create interesting effects, such as an transparent image appearance. However before digging into the details, let's review basics about the CSS colors under this link.

CSS3 opacity

 The opacity property is used to set the opacity level for an element (any element).

The opacity-level specifies the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The opacity property can take a value from 0.0 - 1.0. Lower is the value more is the transparency. 


selector {

      opacity: number | initial | inherit;



  • number - Determines the opacity level, with 0.0 being fully transparent opacity and 1.0 a regular opacity (fully opaque)
  • initial (Default value) or inherit


CSS3 image transparency and hover effect example: 


›› go to examples ››