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.
overlay
Collapsing Logo Effect
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.
Grid Layout with Motion Hover Effect and Content Preview
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.
Dynamic Shape Overlays with SVG
By Yoichi Kobayashi on
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
First Person Sunglasses Try-On Experiment
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.
Multi-Layer Page Reveal Effects
By Mary Lou on
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
Morphing Buttons Concept
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
Page Loading Effects
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
Fullscreen Overlay Effects
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
CSS Overlay Techniques
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
Nifty Modal Window Effects
By Mary Lou on
A set of experimental modal window appearance effects with CSS transitions and animations.
App Showcase with Grid Overlay
By Mary Lou on
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.
Putting CSS Clip to Work: Expanding Overlay Effect
By Mary Lou on
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
Annotation Overlay Effect with CSS3
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-
Overlay-like Effect with jQuery
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
Portfolio Zoom Slider with jQuery
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
Overlay Effect Menu with jQuery
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
Annotation Overlay Effect with jQuery
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