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. ...
overlay
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 cert ...
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 i ...
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 ...
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 fr ...
Image Highlighting and Preview with jQuery
By Mary Lou on
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 nic ...
CSS and jQuery Tutorial: Overlay with Slide Out Box
By Mary Lou on
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 ...
CSS Tutorial: Image with Toolbar and Navigation Overlay
By Mary Lou on
In this tutorial I will show you how to create an overlay toolbar and navigation for an image. This type of technique can, for example, be applied in an image galler ...