Adding a “pin it” button when hover over a Colorbox image

I am improving a wordpress blog for a client. I have a Colorbox lightbox gallery that needs to have Pinterest “pin-it” buttons appear when you hover over the individual, full-size, images while Colorbox is running.

It seems like anyway I append a class to the full-size images in the colorbox, it doesn’t change anything. I think I am misundertanding a fundamental issue here.

Related posts

Leave a Reply

1 comment

  1. Put the images in a ‘div’ container, set the style of that div to position:relative.

    Then add another div inside that container in addition to the image with position:absolute; top:5px; left:5px; display:hidden.

    Then if your container div class is ‘imagecontainer’ and your div for Pinterest is called ‘socialbuttons’ then the following CSS will do the trick:

    .imagecontainer:hover socialbuttons { display:block; }
    

    That’s it.