Without a doubt CSS in gaining a lot of track lately. Because CSS latest features rivals jQuery a lot and because it's a lot easier to just use CSS instead of CSS and jQuery together. For that reason a lot of people are ditching jQuery for CSS.
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.
In this tutorial i will try to teach you how to create some album preview effects using CSS only. No JavaScript section here. At the end of this tutorial i will explain to you how you can easily create those effects just by adding the class of the animation on your div element. One thing you have to keep in mind is that each animation has its own number of images, if you use that animations on an element that contains fewer images the result may not look that great.
HTML
Let's start out the HTML section by talking about ".albums" element. This element element hold everything centered and it has a width of 1100px.
<div class="albums"></div>
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.
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-1">
<img src="_assets/studio_0001.jpg" class="all studio"/>
<img src="_assets/studio_0002.jpg" class="all studio"/>
<img src="_assets/studio_0003.jpg" class="all studio"/>
<img src="_assets/studio_0004.jpg" class="all studio"/>
<img src="_assets/studio_0005.jpg" class="all studio"/>
<img src="_assets/studio_0006.jpg" class="all studio"/>
<img src="_assets/studio_0001.jpg" class="all studio"/>
</div>
<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
</div>CSS
This 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.
.albums-tab-thumb{
float: left;
width: 300px;
}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.
.albums-tab-thumb img {
height: auto;
width: 290px;
background-color: rgba(255,255,255,1);
padding: 5px;
}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.
.sim-anim-1{
position: relative;
}
.sim-anim-1 img{
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.sim-anim-1:hover img{
z-index: 1;
}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.
.sim-anim-1:hover img:nth-child(1){
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.sim-anim-1:hover img:nth-child(2){
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.sim-anim-1:hover img:nth-child(3){
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.sim-anim-1:hover img:nth-child(4){
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.sim-anim-1:hover img:nth-child(5){
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.sim-anim-1:hover img:nth-child(6){
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.sim-anim-1:hover img:nth-child(7){
-ms-transform: scale(0.9,0.9);
-webkit-transform: scale(0.9,0.9);
transform: scale(0.9,0.9);
} Using this on other projects
If you want to use any of those effects on other projects, all you have to do is attach sim-prev-anim.css, set the appropriate styling for the photo container you want to use, add the appropriate number of images to each effect and add the class of the selected animation. If you have any questions please post the in the comment section bellow, i will gladly answer any of your questions.
