javascript - How can I move all my CSS box shadows back under div -

so have 3d - paper effect on div, has been created multiple box-shadow properties. don't know how animate them when hover div, slide under. thinking css animations or jquery/javascript. fine. html:

<div class = "project">       <p>our own js library         <br />         <br />         still working on         <br />         <span class = "platforms">                     <i class = "fa fa-cogs fa-3x" id = "swing"></i>                 </span>       </p> </div> 

css

.project {     background-color: rgb(230, 230, 230);     min-height: 300px;     color: #007fff;     padding: 1%;     box-shadow: 4px 4px #fff, 5px 5px #ccc, 9px 9px #fff, 10px 10px #ccc, 14px 14px #fff; } 

result:

you can transition css property. this:

 transition: box-shadow 1s; 

followed box-shadow want on :hover. maybe this:

box-shadow: 0 0 #fff, 0 0 #ccc, 0 0 #fff, 0 0 #ccc, 0 0 #fff; 

demo

if want, can play around transition-timing-function adjust animation type. more info here.

.project {      background-color: rgb(230, 230, 230);      min-height: 300px;      color: #007fff;      padding: 1%;      transition: box-shadow 1s;      box-shadow: 4px 4px #fff, 5px 5px #ccc, 9px 9px #fff, 10px 10px #ccc, 14px 14px #fff;  }    .project:hover {    box-shadow: 0 0 #fff, 0 0 #ccc, 0 0 #fff, 0 0 #ccc, 0 0 #fff;  }

<div class = "project">    <p>our own js library      <br />      <br />      still working on      <br />      <span class = "platforms">        <i class = "fa fa-cogs fa-3x" id = "swing"></i>      </span>    </p>  </div>