Teach you how to play with CSS image transparency/opacity

directory

Image transparency – Hover effect

Text in a transparent box

Creating transparent images is easy with CSS.

Note: The CSS Opacity property is part of the W3C’s CSS3 recommendation.

    img
    {
      opacity:0.4;
      filter:alpha(opacity=40); /* IE8 and earlier versions */
    }
    img:hover
    {
      opacity:1.0;
      filter:alpha(opacity=100); /* IE8 and earlier versions */
    }
Copy the code

Internet Explorer 9, Firefox, Chrome, Opera, and Safari use the transparency property to make images opaque. The value of Opacity property ranges from 0.0 to 1.0. The smaller the value, the more transparent the element.

Internet Explorer 8 and earlier versions use a filter: alpha (opacity= x). The values x can take are from 0 to 100. The lower value makes the element more transparent.

Image transparency – Hover effect