see http://ericheikes.com/turning-website-images-into-interactive-polaroids/

Polaroid.js

$(function() {

  // Wrap a container around images.
  // Change $("img") to the appropriate selector.
  $("img").wrap("<div class='polaroid'></div>").wrap("<div class='film'></div>");

  // Start the polaroids with low opacity.
  $(".polaroid img").css("opacity", .1);

  // Rotate the polaroids a bit.
  $(".polaroid").each(function() {
    if ($(this).width() < 250) {
      var rotation = Math.floor(Math.random()*20)-10;
    } else {
      var rotation = Math.floor(Math.random()*8)-4;
    }
    $(this).css("-moz-transform",     "rotate(" + rotation + "deg)");
    $(this).css("-webkit-transform",  "rotate(" + rotation + "deg)");
    $(this).css("-o-transform",       "rotate(" + rotation + "deg)");
    $(this).css("-ms-transform",      "rotate(" + rotation + "deg)");
    $(this).css("transform",          "rotate(" + rotation + "deg)");
  });

  var opacityChange = .001;

  // Make the polaroids draggable;
  //   when moved, the opacity increases.
  $(".polaroid").draggable({
    revert: true,
    start: function(event, ui) {
      $(this).css("z-index", 1000);
    },
    drag: function(event, ui) {
      var img = $(this).find("img");
      var new_opacity = Math.min(parseFloat(img.css("opacity")) + opacityChange, 1);
      img.css("opacity", new_opacity);
    },
    stop: function(event, ui) {
      $(this).css("z-index", "");
    }
  });

  // Have polaroids gradually get brighter on their own.
  setTimeout(function() {
    setInterval(function() {
      $(".polaroid img").each(function(){
        var new_opacity = Math.min(parseFloat($(this).css("opacity")) + opacityChange, 1);
        $(this).css("opacity", new_opacity);
      });
    }, 100); // every 1/10 sec
  }, 30000); // after 30 secs

});