Skip to content

Instantly share code, notes, and snippets.

Created Jan 8, 2018
What would you like to do?
Jumping link hovers
a href="" Trump Inaugural Address Generator
a href="" CSS Image Effects
a href="" CSS Scales
a href="" Saints of the Week
a href="" Clippy
a href="" Gradients
a href="" air2048
a href="" CSSynth
a href="" CSS Creatures
a href="" Flexplorer
a href="" Filters Playground
var link = $(this)[0].getBoundingClientRect();
var x_pos = link.width/2 + link.left;
var y_pos = + link.height/2;
var translate = 'translate(' + x_pos + 'px,' + y_pos + 'px)';
var scale = 'scale(' + link.width + ', ' + link.height + ')';
console.log(translate + ' ' + scale);
'transform' : translate + ' ' + scale
<script src=""></script>
@import url(',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;

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