WP-Mix

Quick CSS snippet for you, sort of hard to explain but basically it’s an effect whereby the background color slides up when the link is hovered. Keep reading to check out a demo and grab the code.

Live Demo

Here’s the effect that we’re creating with CSS:

CSS Code

To achieve the hover background slide-up effect, we use the following CSS:

.example a {  
	padding: 3px; border-radius: 1px; 
	color: rgba(107,54,62,0.9); background-color: rgba(107,54,62,0.1);
	-webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; transition: all 0.15s ease;
	background-size: 100% 200%; background-position: 0 -100%; background-image: linear-gradient(to top, transparent 50%, rgba(107,54,62,0.9) 50%);
}
.example a:hover { color: #fff; background-position: 0 0; }

..and the markup is simple:

<div class="example"><a href="#">Hover over this link to see the effect!</a></div>

Some things to tweak, if desired:

• The color and background-color
• The transition duration (make faster/slower)
• The linear-gradient color

This technique was designed for WP-Mix.com, but is free and open for everyone to use however they want. Have fun people! :)