Here is an illustration on how to use CSS to modify the opacity of ‘image-links’ and create a nice effect

CSS:

img{
border:none;
}

updated version

.link img{
-ms-filter: “alpha(opacity=50)”; /*IE 8*/
filter: alpha(opacity=50); /*lower IE versions*/
opacity: 0.5; /*FF*/
}

.link:hover img{
-ms-filter: “alpha(opacity=100)”; /*IE 8*/
filter: alpha(opacity=100); /*lower IE versions*/
opacity: 1; /*FF*/
}

deprecated

.link img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.link:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

How to use:

<a href=”#” class=”link” ><img src=”superman.jpg”/></a>

Sample:

Thanks for the input j.j. 

Tags: CSS sample script