Effect Ideas for Image Grids
In Playground, by Manoela Ilic
Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.
grid
Card Expansion Effect with SVG clipPath
In Playground, by Claudio Calautti
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
Filterable Product Grid
In Blueprints, by Manoela Ilic
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
Product Comparison Layout & Effect
In Blueprints, by Manoela Ilic
A basic responsive product grid layout with comparison functionality and a slide-in effect.
Grid Item Animation Layout
In Playground, by Manoela Ilic
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
Sliding Header Layout
In Tutorials, by Manoela Ilic
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
Recreating the “Design Samsung” Grid Loading Effect
In Tutorials, by Manoela Ilic
A tutorial on how to achieve the grid loading effect seen on the “Design Samsung” site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.
3D Grid Effect
In Playground, by Manoela Ilic
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation.
Google Grid Gallery
In Blueprints, by Manoela Ilic
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google.
Animations for Thumbnail Grids
In Playground, by Manoela Ilic
There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we’d like to show you some inspiration for thumbnail effects using CSS animations.
Loading Effects for Grid Items with CSS Animations
In Playground, by Manoela Ilic
Some inspiration for loading effects of grid items using CSS animations.
Responsive Icon Grid
In Blueprints, by Manoela Ilic
A responsive grid of anchors with icons, text and some example hover transitions.
View Mode Switch
In Blueprints, by Manoela Ilic
A simple view mode switch that has two example layouts, a grid and a list.
Dynamic Grid with Transitions
In Playground, by Manoela Ilic
A dynamic grid layout that let’s you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.
Product Grid Layout
In Blueprints, by Manoela Ilic
A responsive product grid layout with some UI details for inspiration.
Responsive Full Width Grid
In Blueprints, by Manoela Ilic
A responsive grid layout for multiple items in a row that fill all the available width.
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.
Thumbnail Grid with Expanding Preview
In Tutorials, by Manoela Ilic
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
