Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using CSS3 to animate opening a tile on 2x2 quadrant design

Using CSS3 to animate opening a tile on 2x2 quadrant design

Problem

So I have a design that has four quadrant layout. Very similar to https://www.xfinityoffers.com/?exp=mobile but I want it to be responsive and adjust by it's container. Also, important to note it won't just be images like in that example. It's important for me to Animate the opening of each Tile so the user can see the tile expand to cover his 3 buddies and take up the full size of the container.

Here's a codepen of basically what I have so far - http://codepen.io/anon/pen/Kwpvvw I tried making the active tile

.tile.active {
 position: absolute;
 top: 0;
 left: 0;
}

but that doesn't help with an animation because it starts in the top left corner rather than it's actual location. Any insight or any other examples of similar functionality in the wild would be super helpful. Thank you in advance!

Problem courtesy of: anthony-dandrea

Solution

Here's a fiddle. The z-index is that big on the active class because transition affects z-index as well, meaning it will take 0.3 seconds to get from the initial value to the new one. This in turn means that if the zindexes are 0 and 1 you'll see the overlap at the end.

Because of the nature of your animation i think that js will suffice, however you can modify it as you need.

Solution courtesy of: Radu Andrei

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using CSS3 to animate opening a tile on 2x2 quadrant design

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×