Sunday, December 11, 2011

Pin It

Widgets

Transparent Effect For Images

Using this CSS code you can add transparent image effect to blog or website images.
For example see the below image.


CSS Code for transparent effect:

<img src="http://1.bp.blogspot.com/-aRA3QBkWd4M/TuVFrUTyzcI/AAAAAAAAA_0/AIOIgXd7jdg/s320/tweetb.jpg" border="0" onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' style='opacity:0.4;filter:alpha(opacity=40)'/>

This image transparent method uses opacity property from style sheet

In above code Firefox uses the property opacity:x for transparency, where IE uses filter:alpha(opacity=x).
For Firefox x takes value from 0.0 - 1.0. A lower value makes the element more transparent.
For IE x can take value from 0 - 100. A lower value makes the element more transparent.

Note:
1. Change the image url which is show in red color with your own image url.
2. Opacity value of zero will make image invisible.

0 comments

Post a Comment