Articles /Pin to ProfileBookmark

Image To Grid Transition

May 24, 2022  •  @codrops  •  5,000
Copy linkTweet this

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>
</div>

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!

CSSFront-endHTMLJavaScript
This article was originally published on codrops.com
×

Success!

Help @codrops spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with Github
about: ({
version: 0.1.6 BETA 11.29,
whats_new: article editor v2,
up_next: tip code demos,
coming_soon: embeddable tipping,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.6,
notes: article editor refresh

version: 0.1.5,
notes: added pins + new badge

version: 0.1.4,
notes: home refresh + tools

version: 0.1.3,
notes: added reference + demos
)...
recent_tips: (
tipper: @dert,
amount: 1000 SATS,
source: article

tipper: Anonymous,
amount: 1000 SATS,
source: article

tipper: @Loverboylove,
amount: 500 SATS,
source: article
)...