Image opacity - change upon hover

[The Lego Man]

Hello all,

 

I have searched and searched but cannot find out how to support the following feature:

 

Changing the opacity of an image upon hover.

 

Basically what I am trying to do is when a user's mouse hovers over a hyperlinked image it fades a little.

 

Anyone know where this can be done? I tried adding the following code to the stylesheet.css but no impact.

 

 

 

img.opacity {

filter:alpha(opacity=100);

-moz-opacity:1.0;

-khtml-opacity: 1.0;

opacity: 1.0;

}

img.opacity:hover {

filter:alpha(opacity=85);

-moz-opacity:0.85;

-khtml-opacity: 0.85;

opacity: 0.85;

}

[multimixer]

What you added to your css refers to images with class "opacity". Do you have any images with that class? The class name "opacity" that you use does not affect anything, could be "kuku"

 

If you refer just to img your rules will affect all images img{}

 

If you want just linked images, then you could say a img{} (= all images that are within a link)

 

To refer to images with a specific class that are links you can say a img.kuku{} (= all images that are links and image has class "kuku")

 

etc

[The Lego Man]

George,

 

Many thanks for the information and correction!

 

Considering the options, I have implemented it currently for all images with hyperlinks using the following:

 

a img {

filter:alpha(opacity=100);

-moz-opacity:1.0;

-khtml-opacity: 1.0;

opacity: 1.0;

}

a img:hover {

filter:alpha(opacity=85);

-moz-opacity:0.85;

-khtml-opacity: 0.85;

opacity: 0.85;

}

 

 

I notice that there may be some cases where I do not want the opacity change effect so for these I will call the following inline class ..

 

a img.basic {

filter:alpha(opacity=100);

-moz-opacity:1.0;

-khtml-opacity: 1.0;

opacity: 1.0;

}

a img.basic:hover {

filter:alpha(opacity=100);

-moz-opacity:1.0;

-khtml-opacity: 1.0;

opacity: 1.0;

}

 

Do you know where I can add the inline class="basic" for the main store logo? I am not sure what file has the php/html code related to the store logo image.

 

Thanks

David

[multimixer]

Some comments

 

1) Since the settings for all images and the images with class "basic" are same (for default state) you don't need to redeclare it, this one is redundant

 

a img.basic {
   filter:alpha(opacity=100);
   -moz-opacity:1.0;
   -khtml-opacity: 1.0;
   opacity: 1.0;
}

 

class a img.basic is more specific than a.img so hat rules will apply for basic too

 

2) I don't think there is a need to declare any browser specific opacity but for IE

 

3) You don't need to use inline classes necessarily, try to take advantage of the already existing classes. Store logo for example is wrapped into div id="storeLogo", you can use that as #storeLogo a.img:hover{} (= the image of the logo that you want to exclude)

 

All in all, I think you would be fine with a rules set as follows

a img:hover {
   filter:alpha(opacity=80);
   opacity: 0.8;
}
#storeLogo a img:hover {
   filter:alpha(opacity=100);
   opacity: 1;
}

[The Lego Man]

George,

 

That worked perfectly, many thanks! Appreciate it!

 

David