Shake it, shake it, come on and shake it. (Or, you know, hover or touch).

I’ve talked about animating 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.

We don’t want this effect altering the outside edge of the picture, which would happen if we simply added a borde to the image. Instead we’ll create a frame with a div:

<div id="polaroid"></div>

This element will have a background image placed inside it, with the container scaled to fit it, and a broad inset shadow with a large spread value applied together with a sepia filter:

div#polaroid {
	margin: 0 auto;
	border: 25px solid #e3e4d3;
	border-bottom-width: 50px;
	transition: 3s box-shadow ease-in;
	box-shadow: 0 0 200px 200px rgba(29, 25, 4, 1) inset, 
		0 0 3px 6px rgba(0, 0, 0, 0.07);
	width: 50%;
	padding-top: 50%;
	background-image: url(christine-adams.jpg);
	background-size: cover;
 	filter: sepia(50%);

The secondary outer shadow seperates the photograph from its background. On however, we’ll change the div’s box-shadow and lighten the filter:

div#polaroid:hover {
	box-shadow: 0 0 100px 0 rgba(29, 25, 4, 0.8) inset,
		0 0 3px 6px rgba(0, 0, 0, 0.07);
	filter: sepia(20%);

It’s very possible to develop the image after shaking it on the screen, but that will need JavaScript and a future article.

Enjoy this piece? I invite you to follow me at to learn more.
Check out the CodePen demo for this article at