Image Opacity in CSS

Here we look at an example in which we take an Transparent Image and when we put our mouse over on this Image the Image will be Clear.

Complete Program:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
img
{
opacity:0.5;
filter:alpha(opacity=50);
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}
</style>
</head>
<body>

<img src="Penguins.jpg" width="150" height="150" alt="Penguins" />
</body>
</html>


Output:

1.png2.png
Ebook Download
View all
Learn
View all