Crafting a Cutout Collage Layout with CSS Grid and Clip-path
In Tutorials, by Bri Camp Gomez
Learn how to code up an interesting design with a cutout image look using CSS Grid and clip-path.
88 posts tagged with
Draggable Menu with Image Grid Previews
In Playground, by Manoela Ilic
A draggable inline menu with a scattered thumbnail preview of an image grid.
Creating Grid-to-Fullscreen Animations with Three.js
In Tutorials, by Daniel Velasquez
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
Animated Image Columns
In Playground, by Manoela Ilic
An experimental web layout where several image columns get animated out when a menu item is clicked.
Grid Reveal Effects with Anime.js
In Playground, by Manoela Ilic
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
In Playground, by Manoela Ilic
A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
Animated Grid Previews
In Playground, by Manoela Ilic
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.
Fullscreen Hover Loop Effect
In Playground, by Manoela Ilic
A fullscreen loop effect that shows a fast preview of images when hovering a special menu item.
Multibox Menu
In Playground, by Manoela Ilic
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
Grid Layout with Scrollable Content View
In Playground, by Manoela Ilic
A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.
Diagonal Slideshow
In Playground, by Manoela Ilic
A slideshow with a “diagonal” look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
Slide Out Box Menu
In Playground, by Manoela Ilic
A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.
Grid Layout with Motion Hover Effect and Content Preview
In Playground, by Manoela Ilic
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.
Expanding Grid Menu
In Playground, by Manoela Ilic
A CSS Grid powered menu with a box look inspired by the effect seen in the “Ableton Live 10: What’s New”
video.
Expanding Grid Item Animation
In Playground, by Manoela Ilic
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.
CSS Grid Layout Slideshow
In Playground, by Manoela Ilic
A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.
Inspiration for Grid Loading Animations
In Playground, by Manoela Ilic
A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.
Item Reveal Animations with SVG
In Playground, by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
