Question

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.

Answer 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.