<div class="item"> <img src="1.jpg" height="240" width="300" />  
  <div class="caption"> <a href="http://www.ea.com/crysis-2">Crysis 2</a>  
  <p>Зря он это сделал.</p>  
  </div>  
  </div>  
  <div class="item"> <img src="2.jpg" height="240" width="300" />  
  <div class="caption"> <a href="http://www.ea.com/crysis-2">Crysis 2</a>  
  <p>В костюме, как в танке.</p>  
  </div>  
  </div>  
  <div class="item"> <img src="3.jpg" height="240" width="300" />  
  <div class="caption"> <a href="http://www.ea.com/crysis-2">Crysis 2</a>  
  <p>Нано костюм главного героя.</p>  
  </div>  
  </div>

.item {  
  width:300px;  
  height:240px;  
  border:4px solid #333;  
  margin:30px 12px 10px 5px;  
  overflow:hidden;  
  position:relative;  
  float:left;  
  }  
  .item .caption {  
  width:300px;  
  height:71px;  
  bottom:0;  
  color:#fff;  
  background:#000;  
  font-weight:700;  
  position:absolute;  
  left:0;  
  display:none;  
  filter:alpha(opacity=82);  
  -moz-opacity:0.9;  
  opacity: 0.9;  
  }  
  .item .caption a {  
  text-decoration:none;  
  color:#0cc7dd;  
  font-size:17px;  
  letter-spacing:-1px;  
  font-family:Arial, Helvetica, sans-serif;  
  padding:5px;  
  display:block;  
  }  
  .item .caption p {  
  padding:5px;  
  margin:0;  
  color:#fff;  
  line-height:15px;  
  font-size:12px;  
  }  
  .item img {  
  border:0;  
  position:absolute;  
  }

$(document).ready(function() {  
   
  var move = -15  
  zoom = 1.1;  
   
  $('.item').hover(function() {  
   
  width = $('.item').width() * zoom;  
  height = $('.item').height() * zoom;  
   
  $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});  
  $(this).find('div.caption').stop(false,true).fadeIn(300);  
  },  
  function() {  
   
  $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});  
  $(this).find('div.caption').stop(false,true).fadeOut(400);  
  });  
   
  });