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. ...
layout
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. ...
Sliced Dual Image Layout
By Mary Lou on
Some layouts with sliced background images, slideshow functionality and glitch effect. ...
Developer/Designer Page Layout Concept
By Mary Lou on
An experimental page layout concept with a developer/designer theme and a special image reveal effect. ...
Experimental 3D Room Exhibition Layout
By Mary Lou on
A highly experimental 3D room layout for a gallery that aims to show exhibition details in an interesting way. ...
Mirror Effect
By Mary Lou on
Mirror effect as seen around the Web lately, i.e. on Corentin Fardeau's and Method's website. The idea is to mirror an image and animate it within the context of a s ...
Surf Report Template
By Mary Lou on
A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experim ...
Cubes Advent Calendar
By Mary Lou on
A 3D cubes Advent calendar with fun hover effects and background color animations. Clicking the boxes opens another content level with different element animations. ...
Line Maker: Animated Decorative Lines
By Mary Lou on
The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like 'Uber Brand Experience' and 'Details'. ...
Multi-Layout Slideshow
By Mary Lou on
A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js. ...
Above & Beneath: Featured Content Layout Effect
By Mary Lou on
A landing page template with a featured content section and background sounds that change according to the view. ...
Card Expansion Effect with SVG clipPath
By Claudio Calautti on
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify. ...
Filterable Product Grid
By Mary Lou on
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality. ...
Product Comparison Layout & Effect
By Mary Lou on
A basic responsive product grid layout with comparison functionality and a slide-in effect. ...
Photography Website Concept
By Mary Lou on
A photography-inspired website layout with an expanding stack slider and a background image tilt effect. ...
Grid Item Animation Layout
By Mary Lou on
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content. ...
Sliding Header Layout
By Mary Lou on
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. ...
Responsive Full Width Tabs
By Mary Lou on
100% width tabbed content with some example media queries for smaller screens. ...
Split Layout
By Mary Lou on
A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effect ...
Sliding Horizontal Layout
By Mary Lou on
A slider-like layout where the neighboring sections are positioned horizontally next to each other. ...
On Scroll Effect Layout
By Mary Lou on
An on scroll effect template that animates the sides of sections once they are in the viewport. ...
Justified and Vertically Centered Header Elements
By Mary Lou on
A little journey into positioning header elements to be centered vertically and justified with the help of pseudo-elements. ...
Responsive Icon Grid
By Mary Lou on
A responsive grid of anchors with icons, text and some example hover transitions. ...