Post
Ask Question

Image Opacity in CSS

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>  
  3.   
  4.    <head>  
  5.       <style type="text/css">  
  6.       img   
  7.       {  
  8.          opacity: 0.5;  
  9.          filter: alpha(opacity=50);  
  10.       }  
  11.   
  12.       img:hover   
  13.       {  
  14.          opacity: 1.0;  
  15.          filter: alpha(opacity=100);  
  16.       }  
  17.       </style>  
  18.    </head>  
  19.   
  20.    <body>  
  21.       <img src="Penguins.jpg" width="150" height="150" alt="Penguins" />  
  22.    </body>  
  23.   
  24. </html> 
Output:
 
1.png
 
2.png
Next Recommended Reading How to customize HTML/ASP.NET button style using CSS?