<ul>
<li>
<div class="image"><img src="https://unsplash.it/300/200?image=718"></div>
<div class="shadow"></div>
</li>
<li>
<div class="image"><img src="https://unsplash.it/300/200?image=593"></div>
<div class="shadow"></div>
</li>
<li>
<div class="image"><img src="https://unsplash.it/300/200?image=433"></div>
<div class="shadow"></div>
</li>
</ul>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #eee;
margin: 0;
padding: 5em 2.5em;
box-sizing: border-box;
}
ul {
display: flex;
list-style: none;
}
ul li {
position: relative;
margin: 0 3em;
}
.image,
.shadow {
transform: rotateX(45deg) rotateZ(-25deg);
transform-style: preserve-3d;
transition: .3s;
}
.image {
position: relative;
}
.image img {
vertical-align: bottom;
filter: grayscale(100%);
transition: .3s;
}
.image::before,
.image::after {
content: '';
position: absolute;
}
.image::before {
bottom: -8px;
left: 0;
background-color: #d0d0d0;
width: 100%;
height: 16px;
transform: rotateX(90deg) translateY(-8px);
}
.image::after {
top: 0;
left: -8px;
width: 16px;
height: 100%;
background-color: #bbb;
transform: rotateY(90deg) translateX(8px);
}
.shadow {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
box-shadow: -35px 45px 15px rgba(0, 0, 0, .1);
}
ul li:hover .image,
ul li:hover .shadow {
transform: rotate(0);
}
ul li:hover .image img {
filter: grayscale(0);
}
ul li:hover .shadow {
box-shadow: 0 5px 40px rgba(0, 0, 0, .5);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.