---

CSS Image Link Opacity

“Cross Browser CSS Image Link Opacity”

As web developers, we have a lot of choices when it comes to styling our text links with CSS. With image links though, we have to get a little more creative.

“My (Previous) Favorite CSS Image Link Hover Trick”

My favorite trick had always been to assign a padded border around an image link and then change the border color on hover. So, with this CSS rule:

a:link img {padding: 2px; background: #fff; border: 1px solid #999;}
a:hover img {border-color: #333;}

Going along with this html:

<a href="#"><img src="img/elliott-smith-figure-8.jpg" alt="Elliott Smith CD" /></a>	

I would get this:

---

“Another CSS Trick for Image Links...Opacity!”

Although not a W3C recommendation, browser have implemented their version of the 'opacity' property from the CSS Color Module Level 3.

Firefox deals with the opacity property straight-forward: opacity: value. Where value is a number between 0 and 1. So, if I created a class called opacity my css would look like this:

.opacity {opacity: .65;}

Internet Explorer has one variation for IE 7 and another for IE8. Plus, they opted to use a number between 0 and 100.

To safely cover both Internet Explorer browser versions write your css rule like this (in this order!):

a:hover img {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
	opacity: .65;
	} 	

To go along with this html:

<a href="#"><img src="img/elliott-smith-figure-8.jpg" alt="Elliott Smith CD" /></a>	

---

If you have the Firefox Web Developer Addon, use its EDIT CSS function on any site (especially a graphic heavy site) and put the above a:hover img opacity rule in it and see what a difference it makes.

Happy styling!