I have to admit there are some pretty awesome stuff you can create using the latest CSS features and in the last year, for the first time ever, you can create truly interactive web pages using only HTML and CSS. Because i think CSS it's the future from now on i will focus on using CSS more to achieve the desired effects.
HTMLLet's start out the HTML section by talking about ".albums" element. This element element hold everything centered and it has a width of 1100px.
Inside ".albums" there are in this case 9 ".albums-tab" elements, which are basically albums. Since ".albums-tab" it is a class you can add how many albums you want. Inside each album there are 2 elements, ".albums-tab-thumb" and ".albums-tab-text" the first one hold the images and the second one hold the title of this album.
CSSThis document will have 2 style sheets attached, one is main.css which is the general style sheet and the other is sim-prev-anim.css which is the style sheet that contains the classes for all the animation effects. In order for the animations to function properly we need to set the ".albums-tab-thumb" to a proper width for all the images this element will contain. Keep in mind the final width for this will have to be 10px more than the size of each image because we will be applying a padding of 5px to each images.
The next general important step is to set the all images inside ".albums-tab-thumb" do the width you set for the ".albums-tab-thumb" minus -10px because images will have a padding of 5px on each side. And to make that padding white we will apply a white background color.
I will now talk a little about how the first animation works so you can get an idea for the rest of the animations. You can see the rest of the animations by opening sim-prev-anim.css inside _css folder inside the download archive.
Each one of the 9 animations has a class that is applied to ".albums-tab-thumb" but you can apply it to any elements that hold images. The name of the first animations is ".sim-anim-1". This animation requires 7 images. The position of ".sim-anim-1" is set to relative because the position of the images inside will be set to absolute. We will also set the time for all transitions to be 0.5s. When the mouse is hovered over .sim-anim-1 the images inside that element will have a z-index of 1 so when they animate, those images will be above any other image.
To create the desired effect the first image will be rotated by 10 degrees, the next one will be rotated by -10 degrees so that we rotate this image in the opposite direction. The next two images will be rotated by 20 degrees first one by positive 20 degrees and the next one by negative 20. The 5th and the 6th images will be rotated by 30 degrees and by -30 degrees. The last image will have its size scaled to 90% of its original size.