overlay

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

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

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

Collective: ChillBox Project

on

Designed by Christopher Hill, and inspired by Lokesh Dhakar\’s Lightbox2, ChillBox is a JQuery Plugin is a simple, unobtrusive script used to overlay images on ...

Collective: Lightbox_me

on

Have you ever had a DOM element that you wanted lightboxed, but didn’t want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is fo ...