Sticky Captions Concept
In Playground, by Manoela Ilic
A little trick on how to make captions of thumbnails or items “sticky” in order to stay visible in the window or viewport.
grid
Three Script Updates
In Articles, by Manoela Ilic
The animated responsive grid, the direction-aware hover effect and the swatchbook have all been updated and added to GitHub.
Adaptive Thumbnail Pile Effect with Automatic Grouping
In Playground, by Manoela Ilic
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 will be spread into a grid using CSS transitions.
Gamma Gallery: A Responsive Image Gallery Experiment
In Playground, by Manoela Ilic
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.
Animated Responsive Image Grid
In Playground, by Manoela Ilic
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 decorative element of a website since we can randomize the appearance of new images and their transitions.
Direction-Aware Hover Effect with CSS3 and jQuery
In Playground, by Manoela Ilic
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.
Draggable Image Boxes Grid
In Tutorials, by Manoela Ilic
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 like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.
Automatic Image Montage with jQuery
In Playground, by Manoela Ilic
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.
Expanding Fullscreen Grid Portfolio
In Playground, by Manoela Ilic
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
Grid Navigation Effects with jQuery
In Playground, by Manoela Ilic
Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.
Sliding Panel Photo Wall Gallery with jQuery
In Tutorials, by Manoela Ilic
Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. […]
