Grow your CSS skills. Land your dream job.

Hover over image glow, extends too far

  • # March 7, 2013 at 11:12 am

    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

    # March 7, 2013 at 11:20 am

    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

    # March 7, 2013 at 11:21 am

    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)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".