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