Support » Plugins and Hacks » [Resolved] Changing PIN IT Image Hover background

[Resolved] Changing PIN IT Image Hover background

  • Hello,

    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.


Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Marcin Skrzypiec



    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.


    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.

    Plugin Author Marcin Skrzypiec


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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] Changing PIN IT Image Hover background’ is closed to new replies.