Is there a way to add hover over effects (opacity change on mouse over) to all linked images on the site?

This code worked for a single image:

<a href="http://www.americansuburbx.com/2012/12/keizo-kitajima-ussr-1991-2012.html"><img src="http://www.americansuburbx.com/wp-content/uploads/2012/12/BANNER-1b.jpg" style="opacity:1;filter:alpha(opacity=100)"
onmouseout="this.style.opacity=1;this.filters.alph a.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.a lpha.opacity=50" /></a>

You can see the result here - the largest image on the front page:

http://www.americansuburbx.com

I want to apply this to the entire site including the front page, center post column and widgets where the images are linked.

I would have posted this to a sub-category of the forum but it wasn't clear which one it best fit in.

Thanks!

Doug

Also, if there is a way to "fade" the action, similar to the images at the top here:

http://www.interviewmagazine.com/mus...dont-be-safe#_

I came across this and thought that it might apply.

"With CSS3, you can easily create a fade effect with nothing more than a little CSS."

http://bavotasan.com/2011/a-simple-fade-with-css3/

Actually, I added this to CSS inserts and it worked:

img
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
img:hover
{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}


But, I need this to apply only to images that are links - does anyone know what to change to do this?

Ah, I think that I got it:


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

a little over two hours and you got it nailed. Larry and Juggledad will be proud. It's great to get help to solve these issues, but it's even more rewarding when you nut it out yourself, and even better that you are prepared to share your knowledge. Thanks Doug, I'm sure plenty of people will use this code.

Thanks - appreciate it. Yes, feels good to work it out!