Blog

The Polaroid Effect

Shake It Like A Polaroid Picture!

I’ve been asked, “How to make my pictures look like polaroids?”

This is an effect that I have implemented across my blog, and is quite easy to achieve on WordPress. To make your photos look like polaroids:

  • You must have a self-hosted installation, or premium/business plan.
  • This code will ONLY work if you are using the new Gutenberg Editor.

How To Do

  1. Open the WordPress Customizer
  2. Click on CSS
  3. Copy the code below, and paste into the CSS Customizer
  4. Click Publish
  5. Create a new post, insert your image, and publish.

That’s all there is to it!

Hover your mouse over the image:

Harbour Bollard
Polaroid Effect Example

Copy & Paste:

/* Begin Polaroid Effect */
.wp-block-image {
	position: relative;
	background: #fff;
	width: 100%;
	padding: 7px;
	margin: 10px;
	text-align: center;
	-moz-box-shadow: 1px 1px 3px #222;
	-moz-transform: rotate(0deg);
	-webkit-box-shadow: 1px 1px 3px #222;
	-webkit-transform: rotate(0deg);
	box-shadow: 1px 1px 3px #222;
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.wp-block-image:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
	animation: shake .5s;
/* When the animation is finished, start again */
	animation-iteration-count: 2;
}

@keyframes shake {
	0% {
		transform: translate(1px,1px) rotate(0deg);
	}
	
	10% {
		transform: translate(-1px,-2px) rotate(-1deg);
	}
	
	20% {
		transform: translate(-3px,0px) rotate(1deg);
	}
	
	30% {
		transform: translate(3px,2px) rotate(0deg);
	}
	
	40% {
		transform: translate(1px,-1px) rotate(1deg);
	}
	
	50% {
		transform: translate(-1px,2px) rotate(-1deg);
	}
	
	60% {
		transform: translate(-3px,1px) rotate(0deg);
	}
	
	70% {
		transform: translate(3px,1px) rotate(-1deg);
	}
	
	80% {
		transform: translate(-1px,-1px) rotate(1deg);
	}
	
	90% {
		transform: translate(1px,2px) rotate(0deg);
	}
	
	100% {
		transform: translate(1px,-2px) rotate(-1deg);
	}
}
/* End Polaroid Effect */
Advertisements

7 comments

    1. You can install the legacy editor via a recently released plugin John. The downside is, you can only do that on a self hosted, or business account. Hopefully they’ll make it free for users if they kick up enough fuss. Economics will sway them – they won’t want to lose people.

      Liked by 1 person

      1. They will lose me soon Baldy, I’m so sick of the nonsense. I’ve been on WP for ten years or so. They just keep making ridiculous decisions. Instead of allowing users to purchase more storage space which they took away, they force us to pay $300 bucks per year for a stupid business plan? Nope.

        Liked by 2 people

Comments are closed.