When hover at an image, will reduce the opacity and add text

As can see at jsfiddle, When hover at the image, opacity of the image will reduce and text will be added to it. http://jsfiddle.net/tangjeen/QPW27/12/

I am having problem here. Any help will be greatly appreciated.

When I hover over the image, the image does not appear to be stable, the opacity will reduce and increase, even thought the mouse has not left the image.

I would like to break the title to two lines: first line- Pan, second line-Mee.
I tried \n but could not achieve it. Is there a way?

<body>       
  <div id="img" class="img"> 
     <img  class="onclick" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" 
     title="PanMee" alt="PanMee"   
     onclick="bigImage(1)"  style=" width:205px;height:160px; "/> 
  </div> 
</body>

var t;
$('div.img img').hover(function(){  
  var textTopPosition = $(this).position().top+17;  
  var textLeftPosition = $(this).position().left+6; 
  t = $('<div/>')
      .css({top:textTopPosition})
      .css({left:textLeftPosition})
      .text($(this).attr('title'))
      .appendTo($(this).parent());  
  $(this).fadeTo('fast',0.3);
  },function(){
     $(this).fadeTo('fast',1);
     $(t).remove();
  });

Solution

DEMO

Try this

    var t;
    $('div.img img').hover(function(){  
      var textTopPosition = $(this).position().top+17;  
      var textLeftPosition = $(this).position().left+6; 
      t = $('<div/>')
          .css({top:textTopPosition})
          .css({left:textLeftPosition})
          .text($(this).attr('title'))
      .appendTo($(this).parent());  
      $(this).fadeTo('fast',0.3);
    });  

    $('div.img').mouseleave(function(){
         $(this).find("img").fadeTo('fast',1);
         $(this).find("div").remove();
    });