jQuery: LavaLamp image gallery

The LavaLamp effect can also be applied to an image gallery, thus creating the effect of a dynamic frame that follows the mouse on the images. The implementation is almost identical to a single menu with a LavaLamp effect attached to it. Let's see the details.

We have a standard image gallery with our cursor already inside:

<div id="gallery">
	<img src="jquery-lavalamp-image-gallery/1.jpg" alt="" />
	<img src="jquery-lavalamp-image-gallery/2.jpg" alt="" />
	<img src="jquery-lavalamp-image-gallery/3.jpg" alt="" />
	<img src="jquery-lavalamp-image-gallery/4.jpg" alt="" />
	<div id="cursor"></div>

We create a contextual positioning for the cursor inside the main container. Then we position it and we hide it:

#gallery {
	width: 80%;
	margin: 0 auto;
	padding: 2em 0;
	overflow: auto;
	position: relative;

#gallery img {
	float: left;
	width: 200px;
	height: 150px;
	margin-right: 5px;
	cursor: pointer;
	padding: 10px;

#cursor {
	background: #888;
	height: 150px;
	width: 200px;
	position: absolute;
	top: 30px;
	z-index: -1;
	display: none;
	padding: 10px;
	border-radius: 5px;

Cursor dimensions take into account the global image dimensions and its z-index is negative so that it stays behind the images. Now jQuery:

$(function() {

  $('img', '#gallery').each(function() {
    var $img = $(this);
    var left = $img.position().left;    
    $img.hover(function() {
      $('#cursor').stop(true, true).animate({
        visibility: 'show',
        left: left
      }, 'slow');
    }, function() {
      $('#cursor').stop(true, true).animate({
       visibility: 'hide'
      }, 'slow');


We use the left offset of each image to position the cursor just on the image. You can see the demo below.


Live demo

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.