鼠标悬停后模块浮起的效果如何实现？

请问这鼠标悬停后的，模块浮起，底下还有黑色阴影的效果如何实现，大家能提供些线索吗？

img

模块relative定位，然后用hover伪类设置下模块的top往上移动，引用用box-shadow实现

1.利用transform的translate属性让div向上移动
2.并添加盒子阴影box-shadow.
3. 设置transition，使其过渡有动画效果，例如transition:all .2s ease
下面展示的是只能下面看到阴影
把box-shadow的第四个值放大，就可以让阴影超过两侧，例如box-shadow:rgba(0,0,0,.4) 0 12px 17px 1px;
如有帮助，望采纳 ^.^ 谢谢

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
       .button{
           width: 150px;
           height: 60px;
           background: #ccc;
           margin: 100px auto;
           transition:all .2s ease
        }
       .button:hover{
           transform: translateY(-4px);
           box-shadow:rgba(0,0,0,.4) 0 12px 17px -7px;
       }
    </style>
    <body>
            <div class="button"></div>
    </body>
</html>