Making image link 0.5 opacity on hover

[satkin2]

Hi,

 

I've played around with my home page Here

 

What I'm trying to do is get my category images fade to 0.5 opacity on hover. I've played around with a number of css settings, img a:hover, smallText a:hover etc, but I just can't get it to have any influence. Would anyone be able to point how this should be set to work. I've even created a new class for it and it hasn't applied when set, it has shown as being read in firebug, but doesn't show the effect. I really am not sure how to get it to change on hover without all of my links fading on hover.

 

Any advice on how this could be made to work?

 

Thanks

[germ]

Doodling with the web developer plugin in Firefox this code worked for your cushions category image:

 

<img src="images/cushions_category.jpg" alt="Cushions" title=" Cushions " height="300" width="300" style="opacity:1.0;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" />

[NodsDorf]

I assume you want to set up a class for that, to ensure browser compatibility I found this works.

 

CSS File:

.Opacity50 {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
.Opacity50:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

[germ]

I assume you want to set up a class for that, to ensure browser compatibility I found this works.

 

CSS File:

.Opacity50 {
filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
.Opacity50:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Even better!

 

I tried the code in the web developer plugin in Firefox and it works great.

 

Liked it so much I saved it in my stash of "useful tidbits".

:thumbsup:

[satkin2]

Fantastic, thank you.

 

My lack of css was letting me down, I didn't realise I needed to use

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

 

I'd only used

opacity: 0.5;

 

 

Thanks :thumbsup: