Material Design: hover shadow effect

by SHELDON PASCIAK

HTML

<div class="box md" style="background: red;">Red</div>
<div class="box md" style="background: blue;">Blue</div>
<div class="box md" style="background: green;">Green</div>
<div class="box md" style="background: yellow;">Yellow</div>

CSS

.box {
    width: 200px;
    height:200px;
    line-height: 200px;
    margin: 4px;
    text-align: center;
    cursor: pointer;
    float: left;
}
.md {
    z-index:0;
    position:relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.md:hover {
    z-index:999;
    box-shadow:rgba(0, 0, 0, 0.4) 0 10px 20px 0;
    -webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 10px 20px 0;
    -moz-box-shadow:rgba(0, 0, 0, 0.4) 0 10px 20px 0;
}