Being fairly new to CSS. Today I had the need to have a image button do “something different”. I wanted something to change when the mouse hovers over it.
My intention was to draw the eye to the button/image.
As with most problem. There are always multiple way to solve them.
Here is one way of accomplishing it with CSS.
HTML
Before Change
<img src=”pic.jpg”>
After Change
<img class=”img_opac”src=”pic.jpg”>
CSS
.img_opac
{
opacity: 0.4;
}
Conclusion
Make sure you mark it up as a class and not an id.
You will be using images many more times than one.