Pinterest Hover Button

Oops! http://addblog.co.za/

And here’s the code:

PHP:

function insert_pinterest($content) {
	global $post;
	$posturl = urlencode(get_permalink()); //Get the post URL
	$pindiv = '<div class="pinterest-button">';
	$pinurl = '<a target="_blank" href="http://pinterest.com/pin/create/button/?url='.$posturl.'&media=';
	$pindescription = '&description='.urlencode(get_the_title());
	$pinfinish = '" class="pin-it"></a>';
	$pinend = '</div>';
	$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?) \/>/i';
  	$replacement = $pindiv.$pinurl.'$2.$3'.$pindescription.$pinfinish.'<img$1src="$2.$3" $4 />'.$pinend;
	$content = preg_replace( $pattern, $replacement, $content );
	//Fix the link problem
	$newpattern = '/<a(.*?)><div class="pinterest-button"><a(.*?)><\/a><img(.*?)\/><\/div><\/a>/i';
	$replacement = '<div class="pinterest-button"><a$2></a><a$1><img$3\/></a></div>';
	$content = preg_replace( $newpattern, $replacement, $content );
	return $content;
}
add_filter( 'the_content', 'insert_pinterest' );

and the CSS I want for the image that I edited using Firebug:

.pinterest-button {
    position:relative;
    width: auto;
    float: left;
    overflow: hidden;
}
.pinterest-button img {
    display: block;
}
.pinterest-button .pin-it {
    display: block;
    width: 105px;
    height: 105px;
    background: url("/wp-content/uploads/2012/07/pinterest-badge.png") repeat scroll 0 0 transparent;
    z-index: 9999;
    bottom: 25px;
    right: 500px !important;
    position: relative;
}
.pinterest-button .pin-it {
    display:none;
}
.pinterest-button:hover .pin-it {
    display: block;
}

Hi Andrew,

I see what you’re saying. I have tried to edit the CSS and it’s just not getting pulled through onto the live site. Thats why I though the PHP might not be allowing any CSS to be applied the Pin it button?