Menu to Inner Page Animation with Image Grid Background
By Mary Lou on
A layout with a menu and background image grid that animates to an inner content page.
layout
Thumbnail to Full Width Image Animation
By Mary Lou on
An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.
How to Create a Motion Hover Effect for a Background Image Grid
By Mary Lou on
A short tutorial on how to achieve a motion hover effect on a background image grid.
Crafting a Cutout Collage Layout with CSS Grid and Clip-path
By Bri Camp Gomez on
Learn how to code up an interesting design with a cutout image look using CSS Grid and clip-path.
3D Folding Layout Technique for HTML Elements
By Daniel Velasquez on
A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.
Smooth Scrolling Image Effects
By Mary Lou on
A small set of ideas on animating images and other elements while smooth scrolling a page.
Draggable Menu with Image Grid Previews
By Mary Lou on
A draggable inline menu with a scattered thumbnail preview of an image grid.
Draggable Image Strip
By Mary Lou on
A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.
Animated Image Columns
By Mary Lou on
An experimental web layout where several image columns get animated out when a menu item is clicked.
How to Create a Sticky Image Effect with Three.js
By Daniel Velasquez on
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
Layer Motion Slideshow
By Mary Lou on
A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
Page Flip Layout
By Mary Lou on
A template with a two-sided, magazine-like layout and a flat page flip animation. The layout is powered by CSS Grid.
Animated Grid Previews
By Mary Lou on
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
Grid Layout with Scrollable Content View
By Mary Lou on
A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.
Diagonal Slideshow
By Mary Lou on
A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
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.
Outdoors Template
By Mary Lou on
An implementation of Gil Huybrecht's “Outdoors” design project powered by layered CSS grids.
Expanding Grid Item Animation
By Mary Lou on
A grid item animation where the thumbnail scales up when the details view is opened. Based on the Dribbble shot "Surf Project" by Filip Slováček.