SVG Overlay and Infinite Menu Background Animation
In Playground, by Manoela Ilic
A little menu effect with an SVG overlay and an infinite background CSS animation.
overlay
How to Create and Animate Rotated Overlays
In Tutorials, by Manoela Ilic
A tutorial on how to create and animate rotated overlays, or “reveal” elements, for interesting page transition effects.
Dynamic Shape Overlays with SVG
In Playground, by Yoichi Kobayashi
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
In Playground, by Manoela Ilic
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
In Tutorials, by Manoela Ilic
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
Morphing Buttons Concept
In Playground, by Manoela Ilic
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. fullscreen overlay, modal window, sidebar and more.
Page Loading Effects
In Playground, by Manoela Ilic
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 gets loaded.
Fullscreen Overlay Effects
In Playground, by Manoela Ilic
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 overlays.
CSS Overlay Techniques
In Articles, by Sara Soueidan
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 explore each technique’s styles with their pros and cons.
Nifty Modal Window Effects
In Playground, by Manoela Ilic
A set of experimental modal window appearance effects with CSS transitions and animations.
App Showcase with Grid Overlay
In Tutorials, by Manoela Ilic
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.
Putting CSS Clip to Work: Expanding Overlay Effect
In Tutorials, by Manoela Ilic
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
Annotation Overlay Effect with CSS3
In Tutorials, by Manoela Ilic
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-class with the sibling combinator.
Overlay-like Effect with jQuery
In Tutorials, by Manoela Ilic
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 […]
Portfolio Zoom Slider with jQuery
In Tutorials, by Manoela Ilic
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 […]
Overlay Effect Menu with jQuery
In Tutorials, by Manoela Ilic
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. […]
Annotation Overlay Effect with jQuery
In Tutorials, by Manoela Ilic
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 portfolio of www.rareview.com […]
Image Highlighting and Preview with jQuery
In Tutorials, by Manoela Ilic
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 […]
