Hover over image glow, extends too far

[hshah]

So i am a css newbie here, and i need some help

so i made an image glow using this code:

#divgreydout1 {
margin-top:-320px;
-webkit-opacity: 0.25;
moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}

#divgreydout1:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}

My problem is not that it doesnt glow, but even if i hover my mouse a bit far away from the button itself the image starts to glow i only want the image to glow when the mouse is in contact with the button.

Here is an image of the button:

http://www.freeimagehosting.net/xrrmq

[Paulie_D]

There are no ‘glow’ properties listed other than opacity which will affect the whole div.

I’m not seeing a ‘button’ either.

At the moment if you hover over #divgreydout1 it will come to opacity:1

If you want it only to do so when the mouse button is pressed…try

#divgredout1:active

etc

http://codepen.io/anon/pen/wqCof

[CrocoDillon]

My guess is `#divgreydout1` is not the button/image itself but a div around it (divs extend to full available width, unless styled otherwise). Change your selector, something like `#divgreydout1 > img` (just guessing here)

[Author]

Posts