Pinterest Image Overlays

Some code snippets to give you a nice looking Pinterest overlay for your images.

I put together a little jQuery snippet for Simply Recipes that gives images in the body of the recipes a nice little Pinterest icon when you hover over them, letting users Pin the recipe using any of the photos from the recipe.

It’s a fun little way to encourage people to share, and I thought I’d pass it along it for anyone interested in doing something similar.

This gets dropped either into a <script> tag in your header or into a common Javascript file that gets loaded for your site. Be sure you’re loading jQuery first:

Important note: The code above targets all images in the .entry-content div. You can update this to target whichever images you’d like using jQuery selectors. For example, for Simply Recipes, we’re using .single:not(.print-page) .hrecipe .featured-image img, .single .hrecipe .recipe-description img, #recipe-footer img. Roughly translated, that’s “any image on a single recipe page contained in the featured image, recipe description and recipe footer sections” (our method shots are too small to share).

Also, if you’re wondering why I’m testing the image_width, I found that Amazon links drop in an invisible 1px image for tracking, and this was getting the Pinterest treatment. The 1px text makes sure those little images don’t get included. Feel free to up that if you don’t want the treatment being applied to images under a certain size.

Finally, add the following to your style.css stylesheet. Defining keyframes (the animation) for each browser makes this a bit long. Don’t forget to upload the images below and update the image paths.

Hello, I’m Jesse.

I'm a designer and a developer by trade. I'm the mind in Plasticmind Design and the VP of Technology at Simply Recipes. This is where I write in plain language about technology and design, faith and love. More...