Image Transparency

Here is one example showing image Transparency in css

Html file

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>TemplateWorld - Solitude</title>

<link href=”style.css” rel=”stylesheet” type=”text/css” />

</head>

<body>

<div id=”global”>

<div class=”image”>

<img src=”img.jpg” width=”800″ height=”555″ border=”0″ title=”productlist3″ alt=”productlist3″>

<div class=”text”></div>

<div class=”words”>

<p> AABBCE<br />

MRP.Rs. 11,000/- <br />

<a href=”#”>More Details</a>

</div>

</div>

</div>

</body>

</html>

Style.css file

#global { margin:auto; }

.image {position:relative; width:800px; height:555px; margin-left:10px; float:left;margin-left:20px; background:#000;}

.text {position:absolute; top:0; right:0; padding: 0px; width:800px; height:555px; background:#fff; margin-top:386px;}

.text {filter: alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity: 0.50; opacity:0.5; }

.words {position:absolute; top:0; right:0; padding: 0px; width:800px; height:555px; background:#fff; margin-top:386px; background:transparent; }

.words p {font-family:”Arial”; font-size:10px; margin:0px; padding:0px; color:#7b7a61; padding-left:10px; padding-top:5px;}

.words a { color:#4da3c6;}