How to add a magnifying glass overlay to a lightbox icon


Israel Office



Europe office


How to add a magnifying glass overlay to a lightbox icon
submitted by: Tsachi Shlidor

Here is a small snippet I've used on to add a magnifying glass overlay when a user hover over a lightbox icon.
Simple CSS hover won't do the trick here because we can't give a (visible) background-image when hovering over an image, so we append a div using jQuery and position it with CSS.

The jQuery :

Drupal.behaviors.appendMagnifier = function (context) {

// Append magnify div on hover




The CSS :

a.imagefield-lightbox2 .magnify-overlay {
background: url("../images/magnify.png") no-repeat center center transparent;
position: absolute;
height: 66px;
width: 60px;
top: 50%;
right: 50%;
margin-top: -33px;
margin-right: -30px;
text-indent: -9999px;

You will also have to give position: relative to the wrapping li of the image so the magnifying glass will position properly.



How did you achieve the green caption at the top of each lightbox image. I am using D7 with colorbox, is this code usable in D7? Where do I add it?

Apologies for these newbee questions :)


Getting the bar on top is pretty easy :

Drupal.behaviors.move_lightbox2_data = function (context) {
$("#lightbox", context).prepend($("#imageDataContainer", context));

But this is for Lightbox (D6), I'm sure this is possible with Colorbox (D7) but I'm not sure if they work the same.

We should thank you for giving such a wonderful blog.
Your site happens to be not only informative but also very imaginative too.
We find a limited number of experts who can think to write technical articles that creatively.
All of us are on the lookout for information on something like this. I Myself have gone through several blogs to build up on knowledge about this.We look forward to the next posts !!

nesco dehydrator

Add new comment


Welcome popup block