How to make transparent image with CSS

20 April 2009     Tag: ,
Home » Tutorials » 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=”https://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=”https://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….

Bagikan Artikel:

Saran dan Komentar

  • Silahkan tulis saran, komentar dan pertanyaan dibawah!

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