CSS3: Glowing background on link-hover (not text-glow)

css-transitions css glow
Chris picture Chris · Feb 6, 2013 · Viewed 10.8k times · Source

I have a menu, containing several links. I want these links to have a glowing effect in the background when I hover them.

I have almost made it using css transition, box-shadow and a lighter background-color on the links.

The problem is that the transition-effect affects the box-shadow, so that when the transition starts, the links has no box-shadow, which gives them a squared background-color. When the transition has ended, the glowing background looks fine.

Please see my jsFiddle: http://jsfiddle.net/xCJ46/.

I would very much appreciate your help with this.

Here is an extract of my CSS:

<html><style>
div a:hover {
    background: #527fa9;

    -webkit-box-shadow: inset 0 0 30px 15px #49628a;
    -moz-box-shadow: inset 0 0 30px 15px #49628a;
    box-shadow: inset 0 0 30px 15px #49628a;

    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
}
</style></html>

Answer

reinder picture reinder · Feb 6, 2013

Add the box-shadow to the link's property (not hover).

div a { box-shadow: inset 0 0 30px 15px #49628a; }

Related questions

Transitions on the CSS display property

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you …

Read More
Using CSS for a fade-in effect on page load

Can CSS transitions be used to allow a text paragraph to fade-in on page load? I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been …

Read More
How can I transition height: 0; to height: auto; using CSS?

I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not …

Read More