The HTML

There are two DIV’s that make up the construction of each element, we first have out .item div which is the container for our image and caption. Directly inside the ‘item’ div we have the image with the ‘caption’ div directly below that with a link and paragraph tag inside. take a look at the code and image structure below to see the construction of the div elements.

<div class="item"> <img src="/images/mimitah.jpg" height="271" width="304" />
      <div class="caption"> <a href="#">Mimitah Bofando</a>
        <p>African musician Mimitah Bofando. Branding, site design and development</p>
      </div>
    </div>
    <div class="item"> <img src="/images/kate.jpg" height="271" width="304" />
      <div class="caption"> <a href="#">Kate Mcintyre</a>
        <p>TV presenter Kate Mcintyre. Branding, site design and development</p>
      </div>
    </div>

The CSS

.item {
 width:304px;
 height:271px;
 border:4px solid #333;
 margin:30px 12px 10px 5px;
 overflow:hidden;
 position:relative;
 float:left;
}
.item .caption {
 width:304px;
 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;
}

The JavaScript

You can see that we’re setting two variables, ‘zoom’ and ‘move’. Notice that instead of declaring var again in front the variable ‘move’ i’ve omitted it. This is because if we’re setting multiple variables with jQuery you don’t need to add var each time, the values are almost chained.

The next steps are that we setup a .hover function that when triggered will animate the image width and height to give the impression that the image is zooming out, we’re also animating the caption to fade in and out on hover.

$(document).ready(function() {

        var zoom = 1.1
              move = -15;

 $('.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);
 });

});