Wikidot Design & Development

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

Polaroid Images

We thought we'd start off with something just about every site could use - a polaroid image frame. It's a fairly widely documented effect of CSS3, but nevertheless we're bringing it to you.

First off, this is what the final result will look like.

giraffe200.jpg

A lovely Giraffe

There are two ways of adding this to your site: either to every image on your site, or only to those wrapped in a specific div class. We're going with the second. As for where to put the CSS, if you have a custom theme you can add it in there, otherwise you can just put it in a CSS module on each page you have the image. This is the same for just about every entry we'll post, so take note, because we won't be writing it with every single time.

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.