JSFiddle - React, Tailwind, and code Playground

by Mostwanted cJ

HTML

<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="skillhex">
    <div class="inhex1">
        <div class="inhex2">
            <div class="headhex">
                <div class="inhex1">
                    <div class="inhex2 bg1"></div>
                </div>
            </div>
            <div class="tailhex">
                <div class="inhex1">
                    <div class="inhex2 bg2"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.skillhex {
    width: 100px;
    height: 200px;
    background-color: yellow;
    overflow: hidden;
    visibility: hidden;
    position: relative;
    -webkit-backface-visibility: hidden;
    transform: rotate(120deg);
    float:left;
}
.inhex1 {
    width: 100%;
    height: 100%;
    background-color: orange;
    transform: rotate(-60deg);
    overflow: hidden;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.inhex2 {
    width: 100%;
    height: 100%;
    background-color: yellowgreen;
    visibility: visible;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotate(-60deg);
}
.headhex, .tailhex {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(120deg);
}
.headhex {
}
.tailhex {
    transform: translate(-150%);
}
.skillhex:hover .headhex {
    transform: translate(150%);
    transition-duration: 1s;
}
.skillhex:hover .tailhex {
    transform: translate(0%) rotate(120deg);
    transition-duration: 1s;
}
.bg1 {
    background-image: url(http://www.sciencekids.co.nz/images/pictures/math/number1.jpg) !important;
    background-size: cover;
    background-position: center;
}
.bg2 {
    background-image: url(http://www.getdownintwo.com/wp-content/uploads/2013/06/2-graphic.png);
    background-size: contain;
    background-position: center;
}