Image Transparency

Change the opacity on hover

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

Forest Hover over the image or press on the image to see the opacity change
Mountains Hover over the image or press on the image to see the opacity change
Italy Hover over the image or press on the image to see the opacity change

I added a new img class called img.opacity set at opacity: 0.5 and another called img.opacity:hover set at opacity: 1.0 to my CSS file. Then I add the opacity class to the images I want 50% transparent and change to no 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.