Image To Grid Transition

A simple transition where a large image animates to its place in a grid.

Today I have yet another image transition for you. This time, we’ll do something super simple: animate a large image to its place in a grid. This is certainly the first step of something more creative… think of two images, or three! Or maybe changing the size more dramatically! I hope this little experiment gives you some creative ideas ๐Ÿ™‚

This is the initial view:

When clicking on the enter button, we animate the image to its tiny place in the grid:

If you are curious about how this grid is made, have a look at the HTML and the inline styles of each grid item: The grid is a responsive 100 โœ• 100 cell grid. We use some variables to set the column, row and the “size” by setting a proper span value over the column or row, like this:

<div class="grid__item" style="--c: 18;--r: 1;--cs: 22;--rs: 26;">
	<div class="grid__item-img" style="background-image:url(img/5.jpg)"></div>
	<h3 class="grid__item-title oh"><span class="oh__inner">Carrutha Method</span></h3>

The variables are then used in the CSS like this:

.grid__item {
	position: relative;
	display: grid;
	grid-template-areas: 'grid-img' 'grid-title';
	grid-template-rows: 100% auto;
	grid-column: var(--c) / span var(--cs);
	grid-row: var(--r) / span  var(--rs);
	will-change: opacity, transform;

This makes it easy to inspect the grid in the web inspector and then set the variables visually.

Let’s see how everything looks in a flow:

Thanks for checking by and hope you enjoy this little animation!

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 in the loop: Get your dose of frontend twice a week

๐Ÿ‘พ Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!