Transparent Image in CSS

Opacity property can be used in new versions of all major browsers but previous versions can not handle this property. It can take value from 0.0 to 1.0 each point add 10% of opacity.

1
2
3
4
5
6
7

img {
      opacity:0.5;
      filter:alpha(opacity=50);
}

It is this simple to define, filter:alpha is used for older versions of browsers which doesn’t support opacity property. We can create effects with opacity as well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

img {
      opacity:0.5;
      filter:alpha(opacity=50);
}
img:hover {
           opacity:1.0;
           filter:alpha(opacity=100);
}

We have created the hover effect with opacity control, on hovering image will change its opacity to 100%.

Example

Hover your mouse cursor on upper image to see transparency affect.

Final Code (CSS)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style>
img {
      opacity:0.5;
      filter:alpha(opacity=50);
}
img:hover {
           opacity:1.0;
           filter:alpha(opacity=100);
}
</style>

Final Code (HTML)

1

<img src="/images/logo.png" />

Related posts

• Cross Browser Gradients in CSS3
• Matrix() Combining all transformation effects into one.
• Cool CSS button
• Drop Shadows on Images Using CSS
• CSS button effect on link
• Different Border style on each side
• Four Colors on Four sides Border
• CSS Hoverbox Image Effects
• Add thumbnail border effect using CSS