Different Rollover Image on Hover - not working in Chrome & Safari

[Holygamer999]

I have a thumbnail image displayed and when you rollover it I want a different image displayed (this is not a larger version of the image, it's a different image). This works in Firefox, Opera and Internet Explorer but not Chrome or Safari. How can I fix it? I have several different thumbs that I want to do this for.

This is the thumbnail:

<a href="" class="Raw1996"><img src="image.jpg" style="width: 150px; height:173px; display:block"></a>

This is my css for the rollover image to display (when you do this the thumb is hidden):

.Raw1996:hover { display: block; position:absolute; top: 0px; left: 0px; width: 800px; height: 437px; background-image: url('image.jpg') }

[edited by: Holygamer999 at 2:51 pm (utc) on Oct 5, 2012]

[drhowarddrfine]

.image refers to a class called 'image' and you have no such class. If you want it to apply to the <img> them you need to make it: img:hover

You could also do .Raw1996 img:hover{}

[Holygamer999]

Sorry I made a typo, I changed the class names to match now.

I changed the css class name like you said but it's still not working.

.Raw1996 img:hover { display: block; position:absolute; top: 0px; left: 0px; width: 800px; height: 437px; background-image: url('http://example.com/image.jpg') }

Also now the thumb displays in the top left of the table in the foreground.

[edited by: alt131 at 4:33 pm (utc) on Oct 5, 2012]
[edit reason] Thread Tidy [/edit]