$.masker();

Download:

masker.js

Usage:

Connect scripts on your page:
 
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/masker.js" type="text/javascript"></script>
 <script src="js/easing.js" type="text/javascript"></script>
 
 

Insert at bottom of your page:
 
 <script type="text/javascript">
  $(function(){

   $("#masker").masker({
    delay: 700,
    prefix: "images/ford"
   });
				
  });
 </script>
 
 

Make CSS:

 
/* Masker Custom Style */
#masker { width: 800px; height: 600px; margin: 30px auto; }
#masker ul { position: absolute; top: 0px; left: 0px; margin: 5px 15px; list-style: none; }
#masker ul li { margin: 5px; }

/* Heading style */
#masker ul li span { color: #444; cursor: pointer; cursor: hand;}
#masker span.glow { color: #fc5300 !important; font-size: 24px; }

/* Description style */
#masker div.desc { color: #fff; font-size: 14px; width: 400px; position: absolute; }
#masker div.desc b { font-size: 16px; }


/* Masker base style */
#masker { display: block; position: relative; }
#masker img { border: 0; }
#masker ul { z-index: 3000; }
#masker ul li p { display: none; }
#masker div.desc { position: absolute; z-index: 2001; }
#masker .mask { display: none; position: absolute; top: 0; left: 0;  }
 
 

Make HTML:

 
<div id="masker">
 <img src="images/ford.jpg">

 <ul>
  <li><span>Link 1</span>
   <p>
	Description goes here...
   </p>
  </li>
  <li><span>Link 1</span>
   <p>
	Description goes here...
   </p>
  </li>
  <li><span>Link 1</span>
   <p>
	Description goes here...
   </p>
  </li>
  <li><span>Link 1</span>
   <p>
	Description goes here...
   </p>
  </li>
</ul>
</div>
 
 

Options:

Masker options:
 
$("#masker").masker({
 delay   : 700,			// animation delay (ms)
 prefix  : 'images/ford'	// path to image masks and image prefix
 first   : 1,			// first mask index ( ford1 or ford0 )
 ext     : 'png',		// mask image extension

 head    : { fontSize: '14px', left: 0 },            // normal heading style
 headTo  : { fontSize: '24px', left: '15px' },       // active heading style
 
           // Note: '#masker a.glow' will be applied to head too. 
		
 desc    : { bottom: 400, right: 25, opacity: 0 },   // normal description style
 descTo  : { opacity: 1 },                           // active description style

 eIn     : 'easeOutExpo',	// easing
 eOut    : 'easeInExpo',        // Note: don't forget to include easing.js
 opacity : 0.8			// mask opacity	
});