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:
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.
For example see the below image.
CSS Code for transparent effect:
|
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5RCPEFnXlQ3pFW1KhJuNyC6AcPTWzS4Dyi8PNNuJHg092GGa296-n0nOKmAkKeKKGrAQYiK3zAPLYtniRPQQl_c84JHgJP9x9-GGfK8B4_O34Fnh8w-2jTklkwm7pS1Hn33mjX0GAY85/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