Hover The Squares

HTML
<figure> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </figure>
SCSS
html, body { background: #333; height: 100%; margin: 0; overflow: hidden; } figure { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; left: 0; width: 100%; text-align: center; cursor: pointer; } div { width: 9.55%; height: 100px; display: inline-block; opacity: .2; margin: 0 0.2%; vertical-align: middle; transition: 1s; background: rgb(255, 255, 255) } div:hover { height: 600px; transition: 0s; opacity: 1; } @for $i from 1 through 10 { div:nth-child(#{$i}):hover { background: rgb(random(255), random(255), random(255)); } }
JAVASCRIPT
Expand for more options Login