. This is my blog, where I talk about web design and development with 
Pro CSS3 Animation, Apress, 2013
I’ve talked about animating filters previously, but they are not always the most appropriate way to create image transitions. For some effects – such as replicating the development process of a Polaroid photograph – you might need to think a little out of the box.
Whatever we are about to do to this image, we don’t want it affecting the outside edge of the picture, which would happen if we simply added a border. Instead we’ll create a frame with a div:
<div id=polaroid><img src=christine-adams.jpg alt="Christine Adams"></div>(Alternatively, you could place the image as a background for a div with a set height and width.)
We’ll float the outside div to bring it against the edges of the interior element, creating the frame at the same time:
div#polaroid { float: left; border: 25px solid #f3f4e3; border-bottom-width: 50px; background: #1d1904; }div#polaroid img { width: 400px; height: 364px; }We want the Polaroid to visibly develop from the center out towards the edge. To do that, we’ll reset the styles above and apply an inset box-shadow with no offset and a large spread value to the div. I have also added a slight sepia filter to make give the picture a little more of a Polaroid feel. (In the CSS, we’ll keep to the W3C standard property for transitions; you will need to add vendor prefixes for broader support in other browsers ).
div#polaroid {float: left; border: 25px solid #f3f4e3;border-bottom-width: 50px; transition: 3s all ease-in;box-shadow: 0 0 200px 200px rgba(29,25,4,1) inset;}We won’t be able to see this shadow due to the fact that the image is "on top" of the div. We’ll change that in the next section:
div#polaroid img { width: 400px; height: 364px; position: relative; z-index: -1; }Finally, we’ll change the div’s box-shadow on hover:
div#polaroid:hover { box-shadow: 0 0 100px 0 rgba(29,25,4,0.8) inset; }It’s very possible to develop the image after shaking it on the screen, but that will need JavaScript and a future article.
