<html>
<head>
<style>
.container
{
display:flex;
justify-content:center;
transform-style: preserve-3d;
}
.box
{
height:200px;
width:200px;
transition:all 0.5s;
box-shadow:0px 0px 10px black;
-webkit-box-reflect:below 1px linear-gradient(transparent,#0002);
}
.box img
{
height:100%;
width:100%;
}
.container:hover > :not(:hover)
{
margin:0 -20px;
filter:drop-shadow(0 0 25px #000) drop-shadow(0 0 25px #000);
transform:perspective(500px) rotateY(45deg) scale(0.95);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="1.jpg">
</div>
<div class="box">
<img src="1.jpg">
</div>
<div class="box">
<img src="1.jpg">
</div>
</div>
</body>
</html>
0 Comments