CODEWITHSUNDEEP
csshovercss-transitions
Tom Pinchen
Tom Pinchen

Reputation: 2497

CSS3 Transition Ease in and out Box Shadow

I am trying to get div id to ease in and out of a box shadow using CSS3.

The current CSS I have is:

#how-to-content-wrap-first:hover {
    -moz-box-shadow: 0px 0px 5px #1e1e1e; 
    -webkit-box-shadow: 0px 0px 5px #1e1e1e; 
    box-shadow: 0px 0px 5px #1e1e1e;
    -webkit-transition: box-shadow 0.3s ease-in-out 0s;
    -moz-transition: box-shadow 0.3s ease-in-out 0s;
    -o-transition: box-shadow 0.3s ease-in-out 0s;
    -ms-transition: box-shadow 0.3s ease-in-out 0s;
    transition: box-shadow 0.3s ease-in-out 0s;
}

The issue I am having is that on the first hover of the element there is no easing in or out and then any subsequent hovers ease in but do not ease out.

Any advice people have would be much appreciated?

Upvotes: 38

Views: 114613

Answers (3)

Varun Krishna
Varun Krishna

Reputation: 21

This could work:

 #how-to-content-wrap-first:hover{
      box-shadow : inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition : box-shadow ease-in-out .15s;
      transition : box-shadow ease-in-out .15s;
 }

Upvotes: 2

mPrinC
mPrinC

Reputation: 9401

Here is a resource-efficient solution

#how-to-content-wrap-first::after{
    /* Pre-render the bigger shadow, but hide it */
    box-shadow: 3px 3px 5px -1px #80aaaa;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;         
}

#how-to-content-wrap-first:hover::after {
    /* Transition to showing the bigger shadow on hover */
    opacity: 1;
}

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157334

You need to use transitions on .class and not .class:hover

div {
  height: 200px;
  width: 200px;
  box-shadow: 0;
  transition: box-shadow 1s;
  border: 1px solid #eee;
}

div:hover {
  box-shadow: 0 0 3px #515151;
  ;
}
<div></div>

Upvotes: 72

Related Questions