How to Create and Animate Rotated Overlays
By Mary Lou on
A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects.
By Mary Lou on
A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects.
By Mary Lou on
A recreation of the collapsing logo effect seen on PracticalVR. The idea is to have an initial view that animates to a logo in the top left corner of the page.
By Mary Lou on
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.
By Yoichi Kobayashi on
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
By Mary Lou on
A fun "try-on" experiment that shows a first person view through the colored lenses of sunglasses, mimicking the movement of putting them on and off.
By Mary Lou on
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
By Mary Lou on
Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fulls
By Mary Lou on
A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content get
By Mary Lou on
Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen
By Sara Soueidan on
There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to expl
By Mary Lou on
A set of experimental modal window appearance effects with CSS transitions and animations.
By Mary Lou on
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.
By Mary Lou on
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
By Mary Lou on
A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-
By Mary Lou on
Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to
By Mary Lou on
In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amaz
By Mary Lou on
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu
By Mary Lou on
Today we will create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. We got the idea from the wonderful portfoli