Nice pen by Aaron Iker: It combines CSS Custom Properties, CSS Transitions, and SVG Animations using stroke-dashoffset/stroke-dasharray. The reason that it works with text that spans multiple lines is because of the (inline) span that’s being used inside the link.
Tag Archives: hover
4 Ways to Animate the Color of a Text Link on Hover
Good writeup by Katherine Kato of several techniques on how to change the color of a link on hover, animated Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors. There are four different techniques we can use […]
Fading out siblings on hover in CSS
Nice one by Trys Mudford: Hover states traditionally run on the element being hovered on (makes sense, right?). But we can also listen for the hover event on the parent element. That’s the crux of this ‘trick’, we fade out all children when the parent is hovered, and attach another hover handler the child, fading […]
CSS-Only Direction Aware Hover
In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS General Sibling Selector (viz. ~) to rotate the content. Internally it looks like this: Note […]
jQuery Hovercard
A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice. Also comes with integrated support to show the Facebook page or Twitter handle info in the card. Hovercard – a jQuery plugin with built in Twitter and Facebook cards →
Creative CSS3 Animation Menus
Creative CSS3 Animation Menus →
Original Hover Effects with CSS3
Some really nice stuff. Be sure to give the demos a spin. Original Hover Effects with CSS3 →