Animated Polaroid Images

Animated Polaroid Images

So now that you have yourself some cool polaroid images, it’s time to take it up a level and add some animations for those viewing with Safari or Chrome.

Below is what we're aiming for - if you're using a webkit browser, you should see the image gently increase in size when you hover over it. If you're using a mozilla browser, the image will just jump to the bigger size.

giraffe200.jpg

A lovely Giraffe


The first thing we’re going to do is scale up the image when the user hovers over it, using the :hover pseudo class. So from the code for the original post, we’ll change the following lines.
.polaroid-image {
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale (1);
}
 
.polaroid-image:hover {
    -webkit-transform: rotate(3deg) scale(1.1);
    -moz-transform: rotate(3deg) scale (1.1);
}

Now when anyone using a mozilla or webkit browser hovers over the image, it will instantly jump in size. A nice effect, but we can do better…
giraffe200.jpg

A lovely Giraffe

By using -webkit-transitions we can give people using webkit browsers a smooth transition from the static to hover state. And it only takes one line of code!

.polaroid-image {
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale (1);
    -webkit-transition: -webkit-transform 0.5s ease;
}
giraffe200.jpg

A lovely Giraffe


You can easily alter the amount of time it takes for the animation to occur by changing the 0.5s to anything you like, but anything over 2s and the user is likely to get bored before it finishes. The timing functions for the animation can also be altered: valid functions are ease (as used above), linear, ease-in, ease-out and ease-in-out. You can also define the points of a cubic-bezier for complete control, but that’s a little too complicated for a simple polaroid image.

Changing the amount of rotation for the :hover class will also result in an animation. For example the image could straighten up as you hover over it. Notice the -3deg.

.polaroid-image:hover {
    -webkit-transform: rotate(-3deg) scale(1.1);
    -moz-transform: rotate(-3deg) scale (1.1);
}

The above code gives the following result…
giraffe200.jpg

A lovely Giraffe


And so there you have it, an animated polaroid image you can use right across your wikidot site.

Enjoy the article? Tweet it!

tags — css image polaroid

Discussion - No comments yet…2 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.