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

  1. nrenee
    Posted 1 year 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. Marcin Skrzypiec
    Plugin Author

    Posted 1 year 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 1 year 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. Marcin Skrzypiec
    Plugin Author

    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic