<body>
<div class="grid-container">
<div class="grid-item">
1
</div>
<div class="grid-item">
2
</div>
<div class="grid-item">
3
</div>
<div class="grid-item">
4
</div>
<div class="grid-item">
5
</div>
<div class="grid-item">
6
</div>
<div class="grid-item">
7
</div>
<div class="grid-item">
8
</div>
<div class="grid-item">
9
</div>
<div class="grid-item">
10
</div>
<div class="grid-item">
11
</div>
<div class="grid-item">
12
</div>
<div class="grid-item">
13
</div>
<div class="grid-item">
14
</div>
<div class="grid-item">
15
</div>
<div class="grid-item">
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.grid-container {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
background: rgba(0,0,0,0.1);
transform: rotate(-30deg) skew(25deg);
}
.grid-item {
position: absolute;
right: 13px;
background-color: #3498db;
opacity: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
height: 100px;
width: 100px;
transition: 0.5s;
}
.grid-container:hover .grid-item:nth-child(4) {
transform: translate(120px, -120px);
opacity: 1;
}
.grid-container:hover .grid-item:nth-child(3) {
transform: translate(90px, -90px);
opacity: .8;
}
.grid-container:hover .grid-item:nth-child(2) {
transform: translate(60px, -60px);
opacity: .6;
}
.grid-container:hover .grid-item:nth-child(1) {
transform: translate(30px, -30px);
opacity: .4;
}
.grid-container .grid-item:nth-child(16) {
opacity: 1;
}
.grid-container:hover .grid-item:nth-child(16) {
opacity: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.