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.
css grid
Creating Grid-to-Fullscreen Animations with Three.js
By Daniel Velasquez on
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
Animated Image Columns
By Mary Lou on
An experimental web layout where several image columns get animated out when a menu item is clicked.
Grid Reveal Effects with Anime.js
By Mary Lou on
Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
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.
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.
CSS Grid Layout Slideshow
By Mary Lou on
A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.