Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of opacity</title> <style> ul { padding: 0; list-style: none; } ul li { float: left; margin: 10px; } ul li img { opacity: 0.5; display: block; filter: alpha(opacity=50); /* to work in IE */ } ul li img:hover { opacity: 1; filter: alpha(opacity=100); /* to work in IE */ } </style> </head> <body> <ul> <li><img src="/examples/images/club.jpg" alt="Club Card"></li> <li><img src="/examples/images/diamond.jpg" alt="Diamond Card"></li> <li><img src="/examples/images/spade.jpg" alt="Spade Card"></li> <li><img src="/examples/images/heart.jpg" alt="Heart Card"></li> </ul> </body> </html>
