Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Jan 8, 2018
Embed
What would you like to do?
Jumping link hovers
.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
$('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
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
@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;
}
}
@themsleeves

This comment has been minimized.

Copy link

@themsleeves themsleeves commented Jan 20, 2018

Hi and thank you for sharing this good idea !!! Please could you help me... this won't work on my tumblr theme... i can code html, css and script... but i think something is missing for this to work without slim...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment