Menu list cover

HTML
<ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> <Li><span>5</span></Li> </ul>
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%); }
JAVASCRIPT
Expand for more options Login