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.
thumbnails
StackSlider: A Fun 3D Image Slider
By Pedro Botelho on
An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for view
Adaptive Thumbnail Pile Effect with Automatic Grouping
By Pedro Botelho on
An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile w
Unfolding 3D Thumbnails Concept
By Mary Lou on
A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.
Animated Responsive Image Grid
By Mary Lou on
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorati
Photo Booth Strips with Lightbox
By Mary Lou on
A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device fr
3D Thumbnail Hover Effects
By Mary Lou on
A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery.
Direction-Aware Hover Effect with CSS3 and jQuery
By Mary Lou on
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
Thumbnail Proximity Effect with jQuery and CSS3
By Mary Lou on
Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their n
CSS-Only Lightbox
By Mary Lou on
Learn how a CSS-only powered image lightbox works and how to add fancy animations
Elastic Image Slideshow with Thumbnail Preview
By Mary Lou on
Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and
Wave Display Effect with jQuery
By Mary Lou on
How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let's you show images and content in a
Circle Navigation Effect with CSS3
By Mary Lou on
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and ma
Draggable Image Boxes Grid
By Mary Lou on
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu l
Multi-level Photo Map
By Pedro Botelho on
This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each
Responsive Image Gallery with Thumbnail Carousel
By Mary Lou on
A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show a
Elastislide – A Responsive jQuery Carousel Plugin
By Mary Lou on
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defi
Fullscreen Slideshow with HTML5 Audio and jQuery
By Jay Salvat on
In today’s tutorial we'll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to