<div>Een blokje</div>
body { position: relative; z-index: 1; background: #ccc; overflow: hidden; } div { text-align: center; float: left; width: 150px; padding: 50px 30px; margin: 30px; background: #fff; border-radius: 2px; position: relative; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1); -ms-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1); -o-box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1); box-shadow: 0 2px 2px rgba(0,0,0,.3), inset 0 0 40px rgba(0,0,0,.1); -webkit-transition: .1s; -moz-transition: .1s; -ms-transition: .1s; -o-transition: .1s; transition: .1s; } div:before, div:after { content: ""; position: absolute; z-index: -2; width: 32%; height: 20%; bottom: 30px; left: 10%; -webkit-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5); -moz-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5); -ms-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5); -o-box-shadow: 0 15px 10px 15px rgba(0,0,0,.5); box-shadow: 0 15px 10px 15px rgba(0,0,0,.5); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } div:after { right: 10%; left: auto; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); } div:hover { margin-top: 25px; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } div:hover:before, div:hover:after { bottom: 25px; -webkit-box-shadow: 0 15px 10px 15px rgba(0,0,0,.4); -moz-box-shadow: 0 15px 10px 15px rgba(0,0,0,.4); -ms-box-shadow: 0 15px 10px 15px rgba(0,0,0,.4); -o-box-shadow: 0 15px 10px 15px rgba(0,0,0,.4); box-shadow: 0 15px 10px 15px rgba(0,0,0,.4); }