How to make transparent image with CSS

Balinese Child
Look at Images right side…!
If your pointer over on the image, you will see change to be real opacity.

In this time I will show you how to make a transparent image with CSS.

 

Example source code

<!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>Transparency Images</title>
<style type=”text/css”>
#img-roll1, #img-roll2 {
opacity:0.4;
filter:alpha(opacity=40)
}
#img-roll1 {
float:left;
border:#666600 1px solid;
padding:2px;
margin-bottom:10px;}
#img-roll2 {
float:right;
border:#666600 1px solid;
padding:2px;
margin-bottom:10px; }
</style>
</head>
<body>
<img id=”img-roll1″ onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″ onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ src=”http://gusdwi.info/images/besakih-temple.jpg” alt=”Besakih Temple” width=”290″ height=”218″ /> <img id=”img-roll2″ onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″ onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ src=”http://gusdwi.info/images/widy-in-besakih.jpg” alt=”Balinese Child” width=”290″ height=”218″ />
</body>
</html>

So, Copy and paste HTML Code above, and than see the result in your browser….

7 thoughts on “How to make transparent image with CSS

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *