Position Pin it button on top of the image for Pinterest Plugin

1 Views

I am trying to use a Pinterest plugin in my blog, and it is supposed to show a PinIt button on top of any image in my posts. I installed everything like usual, but instead of the button sitting on top of my image it just stands alone and the image moves down. I am using the style position:relative; but it is not working like I want it.
You can see it in my blog: http://www.thehibou.com/

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Change:

    .sn_pin {
    background: url("http://www.thehibou.com/wp-content/uploads/2012/10/pinit-button.png") repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    float: right;
    height: 117px;
    margin: -147px 0 0;
    opacity: 1 !important;
    position: relative;
    right: 0;
    width: 113px;
    z-index: 999;
}
.sn_pinterest .sn_pin {
    display: none;
    position: relative;
}
.sn_pinterest:hover .sn_pin {
    display: block;
    position: relative;
}
.sn_pinterest:hover {
    opacity: 0.75 !important;
    position: relative;
}

    To:

    .sn_pin {
    background: url("http://www.thehibou.com/wp-content/uploads/2012/10/pinit-button.png") repeat scroll 0 0 transparent;
    display: block;
    height: 117px;
    margin: -147px 0 0;
    opacity: 1 !important;
    position: absolute;
    right: 0;
    width: 113px;
    z-index: 999;
}
.sn_pinterest .sn_pin {
    display: none;
}
.sn_pinterest:hover .sn_pin {
    display: block;
}
.sn_pinterest:hover {
    opacity: 0.75 !important;
}

    Just a recap: remove all of the position: relative; but swap the top one to absolute. Also remove bottom: 0; and float: right;

    Hope this helps 😉

  2. To get it on the bottom right, add another CSS rule:

    .sn_pinterest {
    position: relative;
    overflow: hidden;
}

    Then add bottom: 0px; to .sn_pin

    Hope this helps 😉