CSS
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #000;
}
span {
font-family: sans-serif;
font-weight: 900;
font-size: 5em;
}
li {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
float: left;
width: 100px;
height: 175px;
transition: transform 0.2s linear;
}
li:nth-child(1) {
background: #FFFFFF;
}
li:nth-child(2) {
background: #DFDFDF;
}
li:nth-child(3) {
background: #BFBFBF;
}
li:nth-child(4) {
background: #9F9F9F;
}
li:nth-child(5) {
background: #7F7F7F;
}
ul:hover li {
transform: translateX(-25%);
}
ul:hover li:hover {
transform: scale(1.5);
transition-duration: 0.2s;
}
ul:hover li:hover ~ li {
transform: translateX(25%);
}
