Five: How Can I Get A Smooth/Gradual Hover Effect?

Hi guys,

I'm trying to get a smooth hover effect over my linked images. My website is www.mensthetics.com, and if you hover over my images you can see how abrupt the opacity change is. I've pasted this code that I found somewhere to achieve that:

a:link img {
 opacity: 1.0;
 filter: alpha(opacity=100); /* For IE8 and earlier */
}

a:hover img {
 opacity: 0.8;
 filter: alpha(opacity=80); /* For IE8 and earlier */
}

I'm trying to achieve something more similar to http://www.muscleforlife.com/

PS. Also, if there is a way to get the same gradual/fade color change effect for my links that would also be much appreciated!

a:link img,a:visited img {  opacity: 1.0;   filter: alpha(opacity=100);   /* For IE8 and earlier */  -webkit-transition: opacity 350ms ease-in-out;          transition: opacity 350ms ease-in-out;}a:hover img {  opacity: 0.8;   filter: alpha(opacity=80);    /* for IE8- */}

Another effect might be to display the image in its defaultstate at full opacity and on hover saturate it, give it a drop shadow and zoom in. Try

a:link img,a:visited img {     /* need not specify properties' default states * /  -webkit-transition: all 350ms ease-in-out;          transition: all 350ms ease-in-out;}a:hover img {  -webkit-filter: saturtate(125%) dropshadow(8px 5px 5px                                     rgba(61, 61, 61, 0.7));          filter: saturate(125%) dropshadow(8px 5px 5px                                    rgba(61, 61, 61, 0.7));  zoom: 120%;}