Image Opacity in CSS

Here we look at an example in which we take a Transparent Image and when we put our mouse over on this Image the Image will be Clear.
Complete Program:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  4. <head>
  5. <style type="text/css">
  6. img
  7. {
  8. opacity: 0.5;
  9. filter: alpha(opacity=50);
  10. }
  12. img:hover
  13. {
  14. opacity: 1.0;
  15. filter: alpha(opacity=100);
  16. }
  17. </style>
  18. </head>
  20. <body>
  21. <img src="Penguins.jpg" width="150" height="150" alt="Penguins" />
  22. </body>
  24. </html>
Output:
1.png
2.png