please assist with an easier way to call a function

please assist with an easier way to call a function

I have an image which on hover a div appears below the image. The problem is I don't know the easiest way to handle the functionality for multiple images. Right now all of the images have the same class (item) so the hover effect occurs on all the images at the same time, and I only want the effect to occur when hovering over each image individually.

The CSS code is:

  1. .VFP a:link, .VFP a:visited, .VFP a:active{
    color:#fff;
    opacity:.5;
    text-decoration:none;
    }
    .VFP a:hover{
    color:#fff;
    text-decoration:none;
    opacity:.8;
    }


and the JQuery function is 

  2. $(window).bind("load", function() {
  3.    $(".item").hover(
  4.         function () {
  5.             $(".VFP").fadeIn(500);
  7.         },
  8.         function () {
  9.             $(".VFP").fadeOut(100);
  10.         }
  11.     );
  12. });

and HTML:
  2.  <div class="item"><img alt="" class="VP" height="203" src="path/to/image" title="Chairman and CEO" width="206" />
  3.       <p class="VFP"><a href="/path/to/link">View Full Profile</a></p>
  4.     </div>

with the effect being a fade-in on mouseover and fade-out on mouseout. The only way I can think of is to change the class 'item' to an ID and create different function blocks for each image. Is there a better way using less code?