Windows 8 like tile animation using css3

I had started doing a project but halfway through my client said that he wanted windows 8 tile animations like slide up and down, etc in the tiles when on hover. you can check out my current project on github : My Git Hub
My client wants something like this :
Windows 8 Tile
and i have no idea how to do it. Any help will be appreciated. I just need to know the logic behind what to use and where to use.
I am using bootstrap 3 and placing the tiles in columns.

Have you tried looking at the source code of the page you linked to? Source code is a great way to learn how to do something.

You are asking how to do it, and you are linking to tutorial that describes everything in detail how to do it??

Nvm, what you need are two divs.

1.st div is positioned relative and it’s used as a container.
2.nd div is positioned absolute and is used as a sliding thing, with the height of 200%

<div class="first-div">
    <div class="second-div>
        your content
    </div>
</div>

On first-div (container) hover you have to slide the second div with transition: translate(x,y);

You have everything described in that tutorial you linked to it, so I am not going to rewrite everything here.

1 Like

Hi, I came up with this.

1 Like