Skip to main content

Getting Pinterest Hover to Work with Background Images (WP Tiles)

July 8th, 2016

There are a wealth of WordPress plug-ins that exist to add Pinterest buttons on image hover to any WordPress site. These plug-ins most commonly crawl the content looking for img tags and then append the necessary code to get them to work. But what if the image you want this to happen on is a background image?

I recently ran into that situation with a client utilizing WP Tiles for tiled site galleries. WP Tiles places the images within the galleries as background images within each cell. That being the set up, those images are completely missed with a plug-and-play solution that focus solely on img tags.

So I needed a solution that allowed Pinterest hover to work on those tiled galleries. I found this blog post talking about a jQuery-based approach for adding Pinterest share on image hover and then sought to modify for integration with WP Tiles and ended up here:

$(document).ready(function(){

// wp tiles pinterest hover
$('.wp-tiles-tile').append('<div class="hover-pinterest"></div>');
$('.hover-pinterest').append('<a class="pin-it-link" target="_blank" rel="nofollow"></a>');
$('.wp-tiles-tile').hover(function() {
  var bgimage = $(this).find('.wp-tiles-tile-bg').css('background-image');
  var imgurl = bgimage.replace('url("','').replace('")','');
  var encodedurl = encodeURIComponent(imgurl);
  var pathname = $(location).attr('href');
  var url = encodeURIComponent(pathname);
  var desc = encodeURIComponent($(this).find('.wp-tiles-byline-title').text());
  var pinhref = "JavaScript:newPopup('http://pinterest.com/pin/create/button/?url=" + url + "&media=" + encodedurl + "&description=" + desc + "');";
  $('.hover-pinterest a',this).attr('href',pinhref);
  $('.hover-pinterest',this).css('display','block');
},function() {
  $('.hover-pinterest',this).css('display','none');
});
});

function newPopup(url) {
  popupWindow = window.open(url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}

Then for the CSS (I personally write in Sass but the compiled CSS results in the following), I have:

.hover-pinterest {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  transition: opacity .3s ease-in-out;
  z-index: 999;
  background: url('images/pin-it-button.png') no-repeat 0 0;
  background-size: 48px 19px;
  width: 48px;
  height: 19px;
}

.hover-pinterest:hover {
  opacity: .8;
}

.pin-it-link {
  display: block;
  width: 100%;
  height: 100%;
}

You can modify the hover-pinterest location to use a different image & adjust its size. Essentially, the jQuery is looking for any individual WP Tile block and pulling its background image value, stripping the url and parentheses from it, then using it to plug into the Pinterest share URL. It also pulls the caption and uses that for the Pinterest share description.

If you’re not using WP Tiles and just want this for another background image location, you could modify the jQuery to target that location instead but it is the same core concept.

MORE: WordPress Tutorials

Related Articles