Lines to Content Layout Animation
by Mary Lou
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
+ more#hover
Hover Preview Effect with Mini Map
by Mary Lou
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
+ more
Repetition Image Hover Effects
by Mary Lou
A simple and fun hover effect with repeated image layers that get scaled up and down.
+ more
Ripple Effect on a Texture with Three.js
A coding session that deconstructs the ripple effect seen on homunculus.jp.
+ more
Menu and Thumbnail Stack Animation
by Mary Lou
An animation on an image stack for a menu where the images get rearranged from a column into a row.
+ more
Superhero Animation Effect with SVG Filters
Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.
+ more
How to Code the K72 Marquee Hover Animation
by Mary Lou
Learn how to recreate the direction-aware marquee menu hover effect seen on the website of K72 by Locomotive.
+ more
Inline to Menu Link Animation
by Mary Lou
An experimental inline-to-menu-link animation based on a concept by Matthew Hall.
+ more
Thumbnail Hover Effect with SVG Filters
by Mary Lou
A simple thumbnail hover effect with an SVG filter distortion.
+ more
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
by Mary Lou
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
+ more
Rotated 3D Letters and Image Hover Effect
by Mary Lou
A rotated 3D like letters hover effect combined with a tilted image for a menu.
+ more
Magnetic 3D Grid Interaction with Content Preview
by Mary Lou
A grid layout with a magnetic 3D interaction effect and a content preview animation.
+ more
Preview to Full Content Page Transition
by Mary Lou
An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.
+ more
Distributed Letters Animation Layout
by Mary Lou
A distributed letters animation in the context of a triple panel layout with hover effect.
+ more
Circular SVG Text Animation
by Mary Lou
Exploring some experimental circular SVG text effects for an intro animation.
+ more
Ideas for CSS Button Hover Animations
by Mary Lou
Some inspiration for button hover animations using CSS only.
+ more
Simple CSS Line Hover Animations for Links
by Mary Lou
A couple of simple & subtle CSS-based line hover animations for links.
+ more
Inline Menu Layout with Gallery Panel
by Mary Lou
An inline menu layout with a playful hover animation and a gallery content preview panel.
+ more