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

  1. 21 April 2009 at 09:31

    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…

  2. 21 April 2009 at 09:33

    Great article!, I’ve been waiting such tutorial like this. Thanks for sharing 🙂

  3. 16 Juni 2009 at 18:43

    I think I will try to recommend this post to my friends and family, cuz it’s really helpful.

  4. 7 Juli 2009 at 08:48

    Hello, can you please post some more information on this topic? I would like to read more.

  5. 8 September 2009 at 14:42

    Very nice site!

  6. 25 Oktober 2010 at 17:52

    This was a very great read by you looking forward to read more very soon.

  7. 30 Oktober 2010 at 08:31

    Best you should change the post subject How to make transparent image with CSS | Gusdwi dot Info to more suited for your subject you make. I liked the blog post yet.

Tinggalkan Balasan

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