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 tanggapan untuk “How to make transparent image with CSS

  1. Ivan Kristianto Balas

    Great tutorial gusdwi. Looks like i have to learn a lot about css to you. Thanks for sharing it with us 🙂
    Keep posting and happy blogging…

Tinggalkan Balasan

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