<div class="wrapper">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    padding: 16px;
    display: flex;
}

.block {
    width: 128px;
    height: 128px;
    margin: 16px;
    background: #333333;
}

/* Transition */
.block {
    box-shadow: 8px 10px #595959;
    transition: box-shadow 0.35s ease-in-out;
}

.block:hover {
    box-shadow: 16px 18px black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.