Why does my Pin It button "scroll/flip" when hovered over?

Question

Refer to this page for example: http://blog.froy.com/bond-street-loft-by-axis-mundi/

Hovering over any of the Pin It buttons, whether an image or in the bottom of the post, causes the button to 'scroll/flip' instead of showing a static Pin It button image.

I can't even identify what the cause is... Does anyone have any experience with this? This occurs in Chrome and Firefox. Site is running off of Wordpress.

Answer 1

It looks like that's just the way the button was setup. If you go to this site, you'll see that's where the button is hosted. You'll notice it looks like three different buttons. That means it's a sprite and on certain activities by the mouse, it's showing a different part of the image. Just by taking a quick look I found this

media="all"
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

You'll notice in that code there are the transitions, that's part of what's making the effect happen. Also this is part of the code that is showing only a certain image, notice that background-position.

a.PIN_1392869101137_pin_it_button_20 {
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 0!important;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}

Now on the :hover notice where the background position is.

a.PIN_1392869101137_pin_it_button_20:hover {
background-position: 0 0px;
}

That change is what is causing the effect.