The first CSS block is the same code used on the previous webpage to make an image transparent. Now, we have added a second CSS block to specify what should happen when the cursor hovers over an image. In this case we want the image to NOT be transparent when the mouse hovers over it. The CSS for this is opacity:1;.
Move your mouse over the images and observe that when the mouse pointer moves away from the image, the image is transparent again:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ } </style> <body> <h1>Image Transparency</h1> <img class="opa" src="../html_beg/images/klematis_small.jpg" alt="Klematis" width="107" height="90"> <img class="opa" src="../html_beg/images/klematis3_small.jpg" alt="Klematis" width="116" height="90"> </body> |
Image Transparency
|
Note: In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.
