jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.

Setting it up

Make sure you’re including these files in the head of your document

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery","1.3.2");</script>
<link rel="stylesheet" href="css/jsquares.css" type="text/css" media="all" />
<script src="js/jquery.jsquares.min.js" type="text/javascript"></script>

To initiate jSquares simply wrap it in the jQuerys document ready function like so.

<script type="text/javascript">
$(document).ready(function(){
 $('#js-container').jsquares();
});
</script>

The default chunk of HTML will look something like this:

<div id="js-container"> 
 <div class="js-image">  
  <a href="#wolf!"><img class="js-small-image" src="images/wolf-moon.jpg"/></a>
  <div class="js-small-caption">
   <span>Howlla at cha boy!</span>
  </div>
  <div class="js-overlay-caption-content">
   <h4>You can't hide from wolf boy.</h4>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... <a href="#">Read more &raquo;</a>
   </p>
  </div>
 </div>
</div>

Optional parameters

Parameters can be added when you call jsquares like so:

$('#js-container').jsquares({ 
 shuffle_in: false, // have the pictures all fade in on page load?
 fade_on_hover: false, // do we want the images to fade on hover or just change opacity?
 caption_slide_down: false // do we want the caption to slide down or just appear?
});

Here’s a list of all of the options it can take: