<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.