CSS ‘OPACITY’ Property – A Cool Effect For Images

CSS provides us a property called opacity which makes elements opaque. This is mainly used in conjunction with images to display them opaque in the screen. This property when used in conjunction with the hover feature, make the images appear like they are fading in when mouse pointer hovers above it.

The images shown above are all same with Opacity 25, 50, 75 and 100

Images shown above doesn’t have a their hover property set and so are appearing static. However their opacity are set to be 25, 50, 75 and 100. Less opacity means more blurry or less visibility and an opacity of 100 means its clear. We don’t mention 25, 50 or 75 as values, instead the opacity values for an element starts at 0 and the highest is 1.

If you want to see all of an image, that’s opacity:1.0; Without any filters applied the opacity of an image is 1.0 (fully opaque). Just the words opacity and transparency are confusing. They are opposite ends of the spectrum as someone at Digg commented 10% opacity = 90% transparency. That’s it in a nutshell.

The opacity code for simply displaying an image is more straightforward. If we use the hover property along with this we can create a fade-in like feature for images without using any extra coding inside our blog template. Add a few line of CSS styles in your style sheet and you are ready to show opaque images and the fade-in feature.

Before doing anything in your template code please refer this about editing your template.

Copy the code given blow and place it in your style sheet. For blogger blogs this normally appear above the line ]]></b:skin>

Save your template. Now that the CSS class for the opaque property and hover features for images are set, we need to apply them to image.

To show an opaque image in your posts, while including the image in your posts include the property class=”opaqueimage” inside the <img> tag. So the IMG tag will appear like this.

Place you Mouse to see the Image Fade-In.

The above opacity example look the same in this FireFox browser. The -moz-opacity is not necessary. Leave it in the code for possible backward compatibility issues. Opacity works fine in Mozilla FireFox browser with or without the proprietary code and also works in current versions of Opera.