hover

Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL

By Francesco Michelini on November 26, 2019

Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js.

Making Gooey Image Hover Effects with Three.js

By Arno Di Nunzio on October 23, 2019

Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.

How to Create Motion Hover Effects with Image Distortions using Three.js

By Niccolò Miranda on October 21, 2019

In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.

Mouse Flowmap Deformation with OGL

By Robin Delaporte on September 25, 2019

A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.

React Slider with Parallax Hover Effects

By Ryan Mulligan on August 20, 2019

Walk through the build of a React slider and learn how to implement a parallax hover effect.

Image Distortion Effects with SVG Filters

By Mary Lou on March 12, 2019

Three distortion effects powered by SVG filters that are applied to an image when hovering a link.

Custom Cursor Effects

By Stefan Kaltenegger on January 31, 2019

A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.

Interactive Repulsion Effect with Three.js

By Ion D. Filho on December 6, 2018

A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot "Holographic-Interactions".

Fullscreen Hover Loop Effect

By Mary Lou on October 16, 2018

A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.

Grid Layout with Motion Hover Effect and Content Preview

By Mary Lou on May 23, 2018

A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.

Ideas for Proximity Feedback with Progressive Hover Effects

By Mary Lou on May 2, 2018

We're exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it.

WebGL Distortion Hover Effects

By Robin Delaporte on April 10, 2018

A little library that can be used for creating WebGL powered distortion hover effects using displacement images.

CSS Glitch Effect

By Mary Lou on December 21, 2017

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

Organic SVG Shape Morph Ideas

By Mary Lou on September 19, 2017

A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content

Inspiration for Menu Hover Effects

By Mary Lou on August 1, 2017

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.

Letter Effects and Interaction Ideas (Part 2)

By Mary Lou on July 5, 2017

A new set of letter effects and animations for playful typography interactions.

Organic Shape Animations with SVG clipPath

By Mary Lou on June 28, 2017

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.

Letter Effects and Interaction Ideas

By Mary Lou on June 7, 2017

A couple of ideas for typography animations and letter (hover) effects for playful interactions.