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));
}
}
