Replies to This Discussion

Permalink Reply by JenSocial on October 31, 2010 at 1:03am

You can do it one of two ways, and neither is elementary, unfortunately. Most people create two images, one with less opacity. Then, they change the image out, for the hovered state. I'll either try to find or write a tutorial some day in the future, using 2 images.

 

Then, you can also use filter and opacity settings. But, that truly gets convoluted. You have to write extra code for it to work across all browsers. And as usual, IE is the problem.

 

Sorry, wish there was a quick answer to this,

Jen

Permalink Reply by elsodev on November 2, 2010 at 9:31pm

If you want to make the hover effect on specific images , use HTML:

 

<img src="yourimagelink.jpg" style="opacity:0.5;filter:alpha(opacity=50)"

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" >

 

If you want your whole NETWORK have this hover effect , use CSS :

img {

    opacity:0.5;

}

 

img:hover{

    opacity:1;

}

 

Hope that helps.

Permalink Reply by JenSocial on November 2, 2010 at 10:44pm

Thanks Elson!

Only problem, the 2nd  example doesn't work in IE.

 

To make your example work in IE as well, we need something like this, like in your first:

img {opacity:0.5;filter:alpha(opacity=40)}
img:hover{opacity:1;filter:alpha(opacity=100)}

 

Thanks for helping out with this. I wanted to add more, but your example, in addition to the filter alpha, should help do the trick!

 

Best,

Jen

Permalink Reply by elsodev on November 2, 2010 at 10:45pm

Yeah IE the problem . 

Permalink Reply by JenSocial on November 2, 2010 at 10:54pm

I sure second that! LOL! IE - - always the problem child.

:-)

Permalink Reply by elsodev on November 2, 2010 at 11:01pm

Yeah and there's still a lot of people using IE which makes IE still important .

Permalink Reply by JenSocial on November 2, 2010 at 11:34pm

Yes, of course. Any good designer must test across all browsers, as I know you do. I just hope IE catches up someday.

;-)