Michael Gunner

Michael Gunner

© 2015 Michael Gunner. All rights reserved.

Use pure CSS for a Polaroid effect

So I’m making a holiday landing page and this great suggestion comes up to “Polaroidise” the image. I’m thinking, I could do this in Photoshop.


Or, I could do it using psuedo elements. It was very simple to do in the end, and I especially like the way it rotates on hover.

Hope you like it too! Feel free to bastardise/use as you wish.

Grab the code →


  1. Mark

    why not use the CSS element transition to allow for a smoother rotation when hovering over the image.

    other than the above not bad…

  2. Michael Gunner

    Hi Mark – absolutely nothing stopping you doing that, but I didn’t include it here, good idea though! Thanks :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">