Pin button overlays for content images

_pin_it.scss

/* Pinterest images */

.pin-it-image {
	display: block;
	position: relative;

	img {
		display: block;
	}

	.circle {
		width: 75px;
		height: 75px;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -37px;
		margin-left: -37px;
		background-color: red;
		color: #fff;
		font-family: 'Oswald', Arial, sans-serif;
		font-weight: 300;
		text-transform: uppercase;
		font-size: 18px;
		letter-spacing: 2px;
		line-height: 74px;
		z-index: 9;
		opacity: 0;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition:    all 0.2s ease-in-out;
		-ms-transition:     all 0.2s ease-in-out;
		-o-transition:      all 0.2s ease-in-out;
		transition:         all 0.2s ease-in-out;
		text-align: center;
	}

	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,0.4);
		opacity: 0;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition:    all 0.2s ease-in-out;
		-ms-transition:     all 0.2s ease-in-out;
		-o-transition:      all 0.2s ease-in-out;
		transition:         all 0.2s ease-in-out;
	}

	&:hover {
		&:after {
			opacity: 1;
		}

		.circle {
			opacity: 1;

			&:hover {
				background-color: #000;
			}
		}
	}
}

functions.php

<?php
/**
 * Enqueue scripts
 */
function ja_enqueues() {

	// Single Post.
	if ( is_singular( array( 'post') ) ) {

		wp_enqueue_script(
			'js-single-post',
			get_template_directory_uri() . '/js/single-post.min.js',
			array( 'jquery' ),
			THEME_VERSION,
			true
		);
		wp_localize_script(
			'ja-single-post',
			'ja_single_post',
			array(
				'post_title' => get_the_title(),
				'post_url'   => get_permalink(),
			)
		);
	}
}
add_action( 'wp_enqueue_scripts', 'ja_enqueues', 20 );

single-post.js

jQuery(function($){

	/**
	 * Pinterest button image overlay
	 */
	// Add Pinterest link to content images.
	if ( $( window ).width() > 700 ) {
		$('.entry-content img').each( function( index, el ) {
			var $this = $( this ),
				media = $this.prop( 'src' );
			if ( $this.hasClass( 'no-pin' ) || $this.hasClass( 'alignleft' ) || $this.hasClass( 'alignright' ) ) {
				return;
			}
			if ( $this.is( ':hidden' ) ) {
				return;
			}
			if ( $this.parent().is( 'a' ) ) {
				return;
			}
			var title = encodeURI( ja_single_post.post_title ),
				url   = encodeURI( ja_single_post.post_url ),
				link  = '<a href="https://pinterest.com/pin/create/button/?url='+url+'&media=' + media + '&description=' + title + '" class="pin-it-image" title="Pin this image"></a>';
			
			$this.wrap( link ).after( '<span class="circle">Pin It</span>' );
		});
	}

	// Click trigger to new image Pinterest links.
	$( document ).on( 'click', '.pin-it-image', function( event ) {

		event.preventDefault();

		window.open( $( this ).attr( 'href' ), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=750,height=550') ;
	});
});