Category Hover Demo Check out this CodePen! Please enable JavaScript to view this 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> View Full Code // 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; } } } View Full Code 🗓 published on 10 November 2014 ✨️ featured on the CodePen Homepage ⤴️ also on CodePen ( Details, Full ) 🔗 shorturl repc.co/c4Z41 code Have you published a response to this post?Learn how to send a Webmention or let me know the URL: You can also leave an anonymonous comment, thanks to Comment Parade. Responses Reactions: Replies: Please enable JavaScript to view Webmentions. Power of Transform Centering - Interactive Interaction Jazz Mentioned this? Comments on CodePen All Posts Code Code Feed