<div class="portfolio">
  <div class="portfolio_item">
  <div class="image_wrap">
  <img src="images/website1.jpg" alt="Website1"/>
  </div>
  <div class="zoom_overlay">
  <img src="images/website1_notes.png" alt="Website1Notes"/>
  </div>
  </div>
  ...
</div>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

  <script src="js/cufon-yui.js" type="text/javascript"></script>
  <script src="js/Bebas_400.font.js" type="text/javascript"></script>

<script type="text/javascript">
  $(function() {
  //main div
  var $portfolio = $('#portfolio');
   
  //click event for the image :  
  //show the overlay
  $portfolio.find('.image_wrap').bind('click',function(){
  var $elem = $(this);
  var $image = $elem.find('img:first');
  $image.stop(true)
  .animate({
  'width' :'400px',
  'height':'400px'
  },250);
   
  //the overlay is the next element
  var opacity = '1';
  if($.browser.msie)
  opacity = '0.5'
  $elem.next()
  .stop(true)
  .animate({
  'width' :'500px',
  'height' :'500px',
  'marginTop' :'-250px',
  'marginLeft':'-250px',
  'opacity' :opacity
  },250,function(){
  //fade in the annotations
  $(this).find('img').fadeIn();
  });
  });
   
  //click event for the overlay :
  //show the image again and hide the overlay
  $portfolio.find('.zoom_overlay').bind('click',function(){
  var $elem = $(this);
  var $image = $elem.prev()
  .find('img:first');
  //hide overlay
  $elem.find('img')
  .hide()
  .end()
  .stop(true)
  .animate({
  'width' :'400px',
  'height' :'400px',
  'marginTop' :'-200px',
  'marginLeft':'-200px',
  'opacity' :'0'
  },125,function(){
  //hide overlay
  $(this).hide();
  });
   
  //show image  
  $image.stop(true)
  .animate({
  'width':'500px',
  'height':'500px'
  },250);
  });
  });
  </script>