.underline.outline
.underline.background

a href="http://bennettfeely.com/image-effects" Trump Inaugural Address Generator
a href="http://bennettfeely.com/image-effects" CSS Image Effects
a href="http://bennettfeely.com/scales" CSS Scales
a href="http://saintsoftheweek.com" Saints of the Week
a href="http://bennettfeely.com/clippy" Clippy
a href="http://bennettfeely.com/gradients" Gradients
a href="https://bennettfeely.com/air2048" air2048
a href="http://bennettfeely.com/cssynth" CSSynth
a href="http://bennettfeely.com/image-effects" CSS Creatures
a href="http://bennettfeely.com/flexplorer" Flexplorer
a href="http://bennettfeely.com/filters" Filters Playground

@import url('https://fonts.googleapis.com/css?family=Cabin:400,500');

$duration : .5s;
$bounce : cubic-bezier(.33,1.61,0,.83);

body {
	font: 2em Cabin;
	margin: 1em;
	text-align: center;
	background: seashell;
}

a {
	position: relative;
	display: inline-block;
	padding: .25em;
	text-decoration: none;
	color: mediumblue;
	mix-blend-mode: multiply
}

.underline {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	transition: transform $duration $bounce;
	
	&.background {
		background: skyblue;
	}
}

$('a').hover(function(){
	var link = $(this)[0].getBoundingClientRect();

	var x_pos = link.width/2 + link.left;
	var y_pos = link.top + link.height/2;
	
	var translate = 'translate(' + x_pos + 'px,' + y_pos + 'px)';
	var scale = 'scale(' + link.width + ', ' + link.height + ')';
	
	console.log(translate + ' ' + scale);

	$('.underline').css({
		'transform' : translate + ' ' + scale
	});	
});