CSS Opacity
Use the opacity property to dim (blur) or transparent (transparent) the visibility of the html element appearing in the web page so that it can change the visibility of background, text, image etc ..
The value of opacity property is as follows -
0.0 , 0.1 , 0.2 - - - - - 0.9 , 1.0 etc..
Opacity that visibility is more or less done with the help of these values.
Example 1 using opacity text
|
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <h1 style="opacity: 0.5;">Opacity heading</h1> <h1>heading</h1> </body> </html> |
Output
Example 2 using opacity image
|
<!DOCTYPE html> <html> <head> <title></title> <style> img { opacity: 0.6; } </style> </head> <body> <img src= "dummy_book_cover.png" alt="dummy_book_cover" width="250px" height="300px"> </body> </html> |
Output
Example 3 apply hover
|
<!DOCTYPE html> <html> <head> <title></title> <style> img:hover { opacity: 0.5; } </style> </head> <body> <img src="dummy_book_cover.png" width="250px" height="300px"> </body> </html> |
Example 4 apply hover
|
<!DOCTYPE html> <html> <head> <style> img{ opacity:0.5; } img:hover{ opacity:1; } </style> </head> <body> <img src="dummy_book_cover.png" alt="dummy_book_cover" width="250px" height="200px"> </body> </html> |
