* You are viewing the archive for April, 2011

Image Hover Effect — change opacity

A small CSS code changes the opacity level of the images, whenever you place the mouse cursor over these images.

In css, copying the following code:

<style type=”text/css”>

a.imgopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.imgopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>
Add this class to <a> tag, to call for the effect.

<a class=”imgopacity” href=”http://xxxxxx” target=”_blank”><img src=”xxxxx” />

You may see some examples here.