Category Hover Demo

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

<div class="modal">
    <div class="card  archipelago">
        <a class="card-category" href="#">
            <span>Archipelago</span>
        </a>
    </div>
    <div class="card  butte">
        <a class="card-category" href="#">
            <span>Butte</span>
        </a>
    </div>
    <div class="card  canyon">
        <a class="card-category" href="#">
            <span>Canyon</span>
        </a>
    </div>
    <div class="card  dune">
        <a class="card-category" href="#">
            <span>Dune</span>
        </a>
    </div>
    <div class="card  estuary">
        <a class="card-category" href="#">
            <span>Estuary</span>
        </a>
    </div>
</div>

// Website Colour Palette
$white:        #FFFFFF;
$black:        #000000;
$gray:         #333333;
$gray-light:   #999999;
$gray-lighter: #EEEEEE;
$red:          #B02A1A;

// Category Colour Palette
.card-category {
    .archipelago & {
        background-color: mediumseagreen;
        color: mediumseagreen;
    }
    .butte & {
        background-color: brown;
        color: brown;
    }
    .canyon & {
        background-color: burlywood;
        color: burlywood;
    }
    .dune & {
        background-color: lightcoral;
        color: lightcoral;
    }
    .estuary & {
        background-color: darkslateblue;
        color: darkslateblue;
    }
}

// Go Go border-box!
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

// Imagine this is part of an article
// card, as part of a gallery-style list
.card {
    width: 20em;
    max-width: 90%;
    padding: 1.5em 0;
    border-left:  1px solid $gray-lighter;
    border-right: 1px solid $gray-lighter;
}

.card-category {
    background-image: linear-gradient(transparent 0, transparent .5em, $white .5em, $white 100%);
    background-repeat: no-repeat;
    width: 100%;
    height: 2.875em;
    display: block;
    border-bottom: 0 !important;
    position: relative;
    text-decoration: none;
    transition: background .15s, color .15s;
    transform: translate3d(0, 0, 0);
    &:hover,
    &:focus,
    &:active {
        background-position: top 3em left;
        color: $white !important;
    }
    span {
        display: block;
        margin-top: -0.35em;
        padding-bottom: .35em;
        border-bottom: 1px solid $gray-light;
        position: absolute;
        top: 50%;
        left: 1em;
        right: 1em;
        overflow: hidden;
        font-family: "Open Sans";
        text-transform: uppercase;
        transition: border-bottom-color 0 linear .15s, margin .15s ease;
        &:after {
            content: "\F0DA";
            opacity: 0;
            color: $white;
            display: block;
            margin-top: -0.75em;
            position: absolute;
            top: 50%;
            right: 100%;
            font-family: "FontAwesome";
            font-weight: bold;
            transition: opacity .1s ease, right 0 linear .15s;
        }
    }
    &:hover span,
    &:focus span,
    &:active span {
        border-bottom-color: transparent;
        margin-top: -0.714em;
        text-shadow: 0 1px 1px rgba($black, .2);
        transition: margin .15s ease;
        &:after {
            opacity: 1;
            right: 0;
            text-shadow: 0 1px 1px rgba($black, .2);
            transition: opacity .1s ease .05s, right .15s;
        }
    }
}