WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. nrenee
    Member
    Posted 4 months ago #

    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.

    http://wordpress.org/plugins/jquery-pin-it-button-for-images/

  2. mrsztuczkens
    Member
    Plugin Author

    Posted 4 months ago #

    Hi,

    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
    Member
    Posted 4 months ago #

    Thanks!

    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
    Member
    Plugin Author

    Posted 4 months ago #

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

Reply

You must log in to post.

About this Plugin

About this Topic