Simple hover effect for images does not work

[deeper]

Hi,
I'd like to give my social buttons (3 in a sprite) a simple hover effect, without needing any ADDITIONAL images. Creating transparency by "opacity" seems to be a proper effect.

But mouseover doesn't show any effect:

.button1 {
position: absolute;
top: 25px;
left: 47px;
background: url("sprite.png");
background-repeat: no-repeat;
background-position: -50px 0;
width: 25px;
height: 25px;
opacity: 1;
}

.button1 a:hover .button2 a:hover .button3 a:hover {
opacity: 0.5;
}

I tried several browser and .button1:hover but again no success.

[not2easy]

Try it as:

.button1 a img:hover

[deeper]

Try it as:
.button1 a img:hover

Unfortunately no change when hovering.

[lucy24]

.button1 a:hover .button2 a:hover .button3 a:hover

Was that an artifact of posting? I have to assume you meant

.button1 a:hover, .button2 a:hover, .button3 a:hover

unless you've really got links and buttons nested six deep.

If the opacity is applied to a particular element, such as a button, then any change has to be applied to that same element. This can cause problems.

img {opacity: something}
a:hover img {opacity: something-else}

will work.

img {opacity: something}
img a:hover {opacity: something-else}

won't, because the a-- the element that receives the "hover"-- is inside the img.

[deeper]

Was that an artifact of posting? I have to assume you meant

.button1 a:hover, .button2 a:hover, .button3 a:hover

unless you've really got links and buttons nested six deep.

Yes. Three equal buttons(links).

If the opacity is applied to a particular element, such as a button, then any change has to be applied to that same element. This can cause problems.

img {opacity: something}
a:hover img {opacity: something-else}
will work.

{opacity: 1;} is given to .button1 (2,3), which is the class-name for the < a > of the first button-image, which is part of a sprite-image. There are no single img-elements, just the sprite, which is not part of html-code (as usual if using sprites, isn't it?).

[lucy24]

I was simplifying for posting purposes. But in your own example:

.button1 {opacity: 1;}

.button1 a:hover {opacity: 0.5;}

Those are still two different elements. The first one assigns an opacity to anything of class "button1". The second one assigns opacity to an <a> element within something of class "button1". If the classname "button1" belongs to the <a> itself, then you can't say "a" separately in the css. Did you simply mean

.button1:hover

?

[deeper]

.button1:hover works "now". :)

In my first post I mentioned it does not. I tried it, but I guess because of any OTHER reason it doesn't work.

[ninodezign.com...] introduces many nice hover effects done by CSS3.

I have just checked all of them, but
-creating a similar effect like opacity
-without addional images, which represent "hover state" and
-supported by (almost) all browser (CSS3)
obviously only one remains: box-shadow.
Right?

"Similiar like opacity", i.e.,
-not displaying addional text/captions ect.
-not showing the pic differently in terms of "bigger/smaller/zooming/moving"
-just emphazising colors, brightness, saturation, contrast ect. somehow, like it may be proper and usual for image LINKS and visitors.