Geek asks and answers

CSS3: Luminous background for freezing links (not text glow)

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

I almost did it using a css transition, box-shadow and a lighter background in the links.

The problem is that the transition effect affects the shadow box, so when the transition begins, the links do not have a shadow in the box, which gives them a square background. When the transition is over, the glowing background looks normal.

Check out my jsFiddle: http://jsfiddle.net/xCJ46/ .

I would really appreciate your help in this.

Here is an excerpt 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>
+5
source share
1 answer

( ).

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

More articles:


All Articles