Css Box-shadow Transition

I have several div elements on my website that are part of a class that has an inset box-shadow. When I hover over those div boxes, I want the inset property removed from the box-s

Solution 1:

You can not transition from a normal box shadow to a inset box shadow.

Luckily, you can set multiple box shadows, so you can write

.header-link {
    box-shadow:0010pxrgba(0, 0, 0, 0.7) inset, 0px0px0px white;
}

and

.header-link:hover {
    box-shadow: 0px0px0px white inset, 0010pxrgba(0, 0, 0, 0.7);
}

Notice that these shadows are the same that the ones that you had, because the extra shadow has 0px, so won't be displayed. Notice also that the order is important: the browser will transition it only if the first shadow is inset (or normal) in both, the second one is inset (or normal) in both, and so on

fiddle

I have removed the transitions in the hover state, you don't need to repeat them.