JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="top-block">
    <div class="box-container">
        <div class="box-visible">
            <div class="stat-box">
                <div class="stat-circle"></div>
            </div>
        </div>
    </div>
</div>
<div class="bottom-block">
    <div class="box-container">
        <div class="box-visible">
            <div class="stat-box">
                <div class="stat-circle"></div>
            </div>
        </div>
    </div>
</div>

SCSS

html, body, #drawing {
    margin: 0;
    height: 100%;
    background: url(http://subtlepatterns.com/patterns/symphony.png);
}

$size: 200;

body:hover{
    .top-block .box-container{
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
    } 
    .bottom-block .box-container{
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }    
}
%box-block{
    position: relative;
    display: block;
    height: $size/2 * 1px;
    width: $size/2 * 1px;
    overflow: hidden;
}
.top-block{
    @extend %box-block;
    
    .box-container{
        top: 0;
    }
    
    .box-visible{
        bottom: 0;
    }
    
    .stat-circle{
        bottom: 0;
        right: 0;
    }
}
.bottom-block{
    @extend %box-block;
    
    .box-container{
        top: -100%;
    }
    
    .box-visible{
        top: 0;
    }
    
    .stat-circle{
        top: 0;
        right: 0;
    }
}
.box-container{
    position: absolute;
    right: 0;
    height: $size * 1px;
    width: $size * 1px;
    transition: transform 4s;
    transform: rotate(0deg);
}
.box-visible{
    position: absolute;
    right: 0;
    display: block;
    height: $size/2 * 1px;
    width: $size/2 * 1px;
    overflow: hidden;
}
.stat-box{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: $size/2 * 1px;
    width: $size/2 * 1px;
    overflow: hidden;
}
.stat-circle{
    position: absolute;
    display: block;
    height: $size * 1px;
    width: $size * 1px;
    border-radius: 100%;
    background: #FFE000;
    overflow: hidden;
}