CODEWITHSUNDEEP
google-chromecsstransition
Vytas Bradunas
Vytas Bradunas

Reputation: 676

Box-shadow transition not working

I want a box shadow to appear on hover and transition to it. I have the classes below. The shadow appears, but without transition.

I'm looking at it in a chrome browser and can see the transition is applied within developer tools both in the hover and no-hover states.

.node{
  -webkit-transition: box-shadow .25s linear;
  -moz-transition: box-shadow .25s linear;
  -ms-transition: box-shadow .25s linear;
  -o-transition: box-shadow .25s linear;
  transition: box-shadow .25s linear;
}

.node:hover{
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

Now here's the twist. If I apply the transition properties to an ID that's set on the container, then it works!? What difference does it make to set transitions on an element using an ID vs a class?

Upvotes: 8

Views: 16995

Answers (3)

LeMatsacaret
LeMatsacaret

Reputation: 11

yo may to set box-shadow property to 0 0 0 before hover action

.node{box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);}
.node:hover{box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}

That's all

Upvotes: 1

Prodip
Prodip

Reputation: 1

.node:hover{
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: .25s linear 0s;
-moz-transition: .25s linear 0s;
-o-transition: .25s linear 0s;
transition: .25s linear 0s
}

try this one. Its works.

Upvotes: 0

Gene Parcellano
Gene Parcellano

Reputation: 6044

I agree with Sam, It seems like there is something overriding the style. Try being more specific with the selector.

For example, if you're HTML is setup like so:

<div class="item">
    <a class="node">Info</a>
</div>

Try being more specific with the selector like so:

.item a.node:hover {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

I hope that helps.

Upvotes: 3

Related Questions