Image lightening effect issue

HTML & CSS
1

Here is my webpage: http://174.120.16.66/~thomasse/

The “TSI” logo at the top left of the page used to get lighter when you mouseover it. You can see the same effect on the nav menu items, and here on this logo ( http://www.elegantthemes.com/preview/SimplePress/ ). For whatever reason, this is no longer working on my page. Any thoughts? I have tried a lot of changes in the css to no avail.

thanks

2

Try fixing your HTML. If it yet doesn’t work, at least you know you have clean HTML to troubleshoot

<img div=“” <=“” alt=“TSI - Thomas Services, Inc.” src=“http://174.120.16.66/~thomasse/wp-content/uploads/2012/08/tsilogo3.png”>

Change to
<img alt=“TSI - Thomas Services, Inc.” src=“http://174.120.16.66/~thomasse/wp-content/uploads/2012/08/tsilogo3.png”>

See if that fixes it. If not, I think you also might be missing some Javascript that does that fade for you which is unnecessary.

3

As said above, your HTML is all messed up. But also, the jQuery is trying to target an image with the id=“logo”, but you don’t have the “logo” ID on the image (as is the case in the other site) but on the containing div. So move the id back to the image.

Here’s what the JS is targeting:

jQuery('[COLOR="#FF0000"]img#logo[/COLOR]').hover(function() {
		jQuery(this).animate({opacity: .6}, "fast");
	}, function() {
		jQuery(this).animate({opacity: 1}, "fast");
	});

This is at the bottom of your page.