Image Transparency

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Reversed Hover Effect

I added a new img class called img.noopacity set at opacity: 1.0; and another called img.noopacity:hover set to opacity: 0.5; to my CSS file. Then I add the noopacity class to the images I want to make transparent on mouse-over and change it to 50% transparency when the mouse hovers over it.

A person may use any class name and any opacity level that suits their needs. Just make sure the img.classname is followed by the img.classname:hover pseudo-class in the CSS file and class="classname" is added to make the img tag in the HTML file.