SVG Overlay and Infinite Menu Background Animation
by Mary Lou
A little menu effect with an SVG overlay and an infinite background CSS animation.
+ more#overlay
How to Create and Animate Rotated Overlays
by Mary Lou
A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects.
+ more
Dynamic Shape Overlays with SVG
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.
+ more
First Person Sunglasses Try-On Experiment
by Mary Lou
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.
+ more
Multi-Layer Page Reveal Effects
by Mary Lou
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
+ more
Morphing Buttons Concept
by Mary Lou
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
+ more
Page Loading Effects
by Mary Lou
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
+ more
Fullscreen Overlay Effects
by Mary Lou
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
+ more
CSS Overlay Techniques
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
+ more
Nifty Modal Window Effects
by Mary Lou
A set of experimental modal window appearance effects with CSS transitions and animations.
+ more
App Showcase with Grid Overlay
by Mary Lou
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.
+ more
Putting CSS Clip to Work: Expanding Overlay Effect
by Mary Lou
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
+ more
Annotation Overlay Effect with CSS3
by Mary Lou
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-
+ more
Overlay-like Effect with jQuery
by Mary Lou
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 […
+ more
Portfolio Zoom Slider with jQuery
by Mary Lou
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 [&he
+ more
Overlay Effect Menu with jQuery
by Mary Lou
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. […
+ more
Annotation Overlay Effect with jQuery
by Mary Lou
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
+ more
Image Highlighting and Preview with jQuery
by Mary Lou
In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to […]
+ more