Ready to get started?Download WordPress


jQuery Pin It Button For Images
[resolved] Changing PIN IT Image Hover background (4 posts)

  1. nrenee
    Posted 4 months ago #


    Okay so I want to change the background. I am fairly advanced at CSS but I am STILL not sure what I am doing wrong. I want to change the white/transparent pin it hover to a gradient background using CSS.

    What would be the best way to go about this. I tried editing

    img.pinit-hover {

    but it's not doing anything..even if i just put a simple background-color: #000000; for a solid black bg hover.


  2. mrsztuczkens
    Plugin Author

    Posted 4 months ago #


    From what I know, setting background color for a not-transparent (.png that's actually transparent) image doesn't work, even if you'll set opacity to like 0.1. Example:

    <img id="test" src="http://placekitten.com/g/200/300" style="background-color: red; opacity: 0.5;">

    To implement what you want, you'd need to add a layer over the image and set its background color. Try using the static mode of the plugin and styling div.pinit-overlay. Hope this helps.

  3. nrenee
    Posted 4 months ago #


    Your solution is actually the first thing I tried and unfortunately it made it didn't work like I would hope. For example if i changed the bg to black instead of transparent, all of my images were black instead of turning black when I hovered over the image.

  4. mrsztuczkens
    Plugin Author

    Posted 4 months ago #

    Then style it only on hover (div.pinit-overlay:hover).


You must log in to post.

About this Plugin

About this Topic