Grow your CSS skills. Land your dream job.

Hover glow effect?

  • # January 4, 2010 at 7:18 am

    I’m looking for a way to create a really subtle ‘glow’ effect around an element on hover. Obviously this could be achieved with a rollover image, but I want it to look more like a transition rather than an on/off effect.

    If you check the nav on this page you’ll see what I mean:
    http://www.portlandstudios.com/

    Has anyone come across any css tricks / js plugins to achieve this?

    Thanks in advance!

    # January 4, 2010 at 8:14 am

    The css part of it is easy you would just need to create a background image with the hover effect you want,

    Code:
    #nav a:hover{
    background-image:url(hover.jpg);
    }

    This way it wouldn’t be as smooth as it is on that flash site, but there is a way to do it in jquery. as I recall it is very easy to do. just search fade in.
    I got this off of the jquery website. its not what you need because this shows hidden divs, but it would look similar.

    Code:
    $(document.body).click(function () {
    $(“div:hidden:first”).fadeIn(“slow”);
    });
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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