Image hover effects

changing an image with xss

[arusegawa]

Hello,
I am currently updating a site entirely through css, and have come upon an obstacle which I cannot overcome.
I would like all images on my site to use filter:invert(); whenever a user hovered the pointer over them, but can not seem to find the right properties to do this with. I have tried img:hover {} and img {} but they don’t seem to work. I also cannot edit the image tag itself (I can't put a class='' in it)
Any advice/help would be appreciated,
thank you.

[BlobFisk]

Welcome to WebmasterWorld, arusegawa!

You will need to wrap every image in an anchor to do this, as currently there is no mouseover/mouseout on the <img> tag.

You can then use anchor pseudo-classes to achieve your hover effect.

HTH

[Maxformed]

A neat trick I picked up somewhere:

a#Companies img {width: 127px; height: 40px; border-width: 0; background: top left no-repeat;}
a#Companies {
display: block; 
width:127px; height:40px;
background-image: url(images/backgrounds/homeBkgrd/hp_bt_Com.png);
background-repeat: no-repeat;
}
a#Companies span {
display: none;
}
a#Companies:hover {
width:127px; height:40px;
background-image: url(images/backgrounds/homeBkgrd/compOver.png);
}

Use the a#Companies img note to use a transparent gif as the link placed in the html - the actual images are still contained in the CSS file.

Use the a#Companies span section to put in some non-displaying text for the readers.

in the html:

<a href="companies.html" id="Companies" onMouseOver="P7_autoLayers(0,'subCompanies')">
<span>Companies of the Place we work for</span>
<img src="images/navigation/homeNav/transparent10px.gif" alt="Companies of the Place we work for"></a></div>

Hope that make sense. You can ignore the auto layers thing if you aren't using hidden submenus.

Max