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