CSS

adplus-dvertising
Creating a Transparent image in CSS
Previous Home Next

To making transparent image in css code is written below-

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />

In Browser Firefox the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Image Transparency Mouse Over Effect-

<img src="logo.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" 
/>
<img src="Logo1.jpg" style=
"opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" 
/>

HTML code is given below-

<html>
<head>
<style type="text/css">
div.background
{
}
div.transbox
{
width:200px;
height:180px;
margin:30px 50px;
background-color:#fffffA;
border:1px solid black;
filter:alpha(opacity=60);
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<img src="4c_steria.jpg" style=
"opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" 
/>
</div>
</body>
</html>

Your web page will look like as below-

Previous Home Next