Forums

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)

treehouse : what would you like to learn today?

Forums

Hover over image glow, extends too far