Animations for Thumbnail Grids

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.

Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.

The beautiful illustrations used in the demos are by talented Isaac Montemayor.

Please note that we’ve created a dummy script for navigating through the images. Needless to say, this is not a script for managing images.

In the demos we use an unordered list with images wrapped in an anchor. Depending on the class of the list, we’ll apply a certain effect. The next set of images will be inserted into the list items which means that we’ll have two anchors in one list item.

An example for an effect is the following “scale and rotate”. The active class will trigger the animations and the first anchor will disappear with the “scaleRotateOut” keyframes. The tt-empty is used to indicate if an item was previously empty. So in that case we don’t want this anchor to disappear:

/* Scale and rotate */
.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:first-child {
	animation: scaleRotateOut 0.6s forwards;
}

The second, new anchor will appear with another animation. In case the item was empty, we don’t have a second child, but only one. So we need to cover these cases, too:

.tt-effect-scalerotate.tt-effect-active li a:nth-child(2),
.tt-effect-scalerotate.tt-effect-active li.tt-empty a {
	opacity: 0;
	animation: scaleRotateIn 0.6s forwards;
}

If there is a new anchor being added to an item, we just want to fade it out:

.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:only-child {
	animation: fadeOut 0.6s forwards;
}

For the effect to look nice, we don’t want the bottom row items to overlap the upper row ones, so we’ll set the right z-index for the first and second row:

.tt-effect-scalerotate li:nth-child(-n+3) { z-index: 2; } /* order for correct overlapping */
.tt-effect-scalerotate li:nth-last-child(-n+3) { z-index: 1; }

And finally, we define the animations:

@keyframes scaleRotateOut { 
	100% { opacity: 0; transform: scale(0); }
}

@keyframes scaleRotateIn { 
	0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); }
	100% { visibility: visible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); }
}

@keyframes fadeOut { 
	from { opacity: 1; }
	to { opacity: 0; }
}

The animations will of course only work in browsers that support them. IE10 does not play along very well with some of them due to a serious bug related to using percentages for transforms.

I hope you enjoy these effects and find them inspiring!

img01
img02
img03
img04
img05
img06
img07
img08
img09
img10
img11
img12
img13
img14
img15
img16
img17
img18
img19
img20
img21
img22

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.