FiFo - Compiled Thumb

by Paulo Ávila

HTML

<div id="thumb-compilation">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<br><br>
<img src="https://secure-b.vimeocdn.com/ts/454/674/454674243_640.jpg" width="120">

SCSS

#thumb-compilation {
    width: 300px;
    height: 200px;
    border: 1px solid black;

    span {
        display: block;
        float: left;
        width: 25%;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        
        &:nth-child(1) {
            background-image: url(https://secure-b.vimeocdn.com/ts/454/674/454674243_640.jpg);
        }
        &:nth-child(2) {
            background-image: url(https://secure-b.vimeocdn.com/ts/109/404/109404495_640.jpg);
        }
        &:nth-child(3) {
            background-image: url(https://secure-b.vimeocdn.com/ts/449/069/449069760_640.jpg);
        }
        &:nth-child(4) {
            background-image: url(https://secure-b.vimeocdn.com/ts/452/403/452403817_640.jpg);
        }
    }
}