Spotlight is a web’s most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Spotlight runs out of the box:
- No additional HTML snippets
- No additional CSS resources
- No additional images/assets
- No additional handling of dynamic content and event listener
An experimental web layout where several image columns get animated out when a menu item is clicked.The idea is based on the current trend of a grid layout where the columns are animated. In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.
Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.
Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.
Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.
DoFilter is a Full Responsive Bootstrap Multipurpose Filtering and Shorting plugin built on Latest Version of Bootstrap Framework (v3.3.7), HTML5, CSS3 and jQuery. Its wonderful features can be used to Filtering and Shorting your website content as like Portfolio, Service, Team, Blog, Products, Pricing, FAQ etc. Also you can customize it for Filtering and Shorting any your website content.
- 19 Different Style Isotope Filtering
- Grid and Masonry Filtering and Shorting
- Lightbox Image Gallery
- Image Hover Effect
- W3C Valid HTML Code
- HTML5 ,CSS3 & jQuery
- 100% Responsive & Mobile-Friendly Layout
Muuri creates responsive, sortable, filterable and draggable grid layouts. Yep, that’s a lot of features in one library, but we have tried to make it as tiny as possible. Comparing to what’s out there Muuri is a combination of Packery, Masonry, Isotope and jQuery UI sortable.
A portfolio template, with a filter that triggers the rotation of 3D sections.
CSS 3D Transforms can be used in plenty of creative ways, particularly if combined with CSS Transitions! Today’s nugget is a good example of how to use CSS to create a parallelepiped, whose faces are different projects. A filter on top of the page triggers the 3D rotations that reveal new projects.