overlay

How to Create and Animate Rotated Overlays

By Mary Lou on April 18, 2019

A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects. ...

Collapsing Logo Effect

By Mary Lou on June 5, 2018

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 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. ...

Dynamic Shape Overlays with SVG

By Yoichi Kobayashi on October 17, 2017

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 February 27, 2017

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 June 1, 2016

A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration. ...

Page Loading Effects

By Mary Lou on April 23, 2014

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 February 6, 2014

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 ...

App Showcase with Grid Overlay

By Mary Lou on April 1, 2013

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 January 17, 2013

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 May 14, 2012

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 February 15, 2011

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 December 27, 2010

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 November 25, 2010

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 October 12, 2010

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 ...

Image Highlighting and Preview with jQuery

By Mary Lou on July 4, 2010

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 allow users to v ...

CSS and jQuery Tutorial: Overlay with Slide Out Box

By Mary Lou on December 3, 2009

The other day I was creating an overlay with a box for Cody’s jTextTranslate jQuery Plugin and I thought, it could be useful to describe the technique in a tut ...