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.

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 twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/Frlhq