CodingForums.com - distorting image on mouseover

I'm getting ready to look at redoing a div rollover effect, wherein a div expands on mouse-over and contracts back to its original size on mouse-out.

I see two problems right now: The contained images stretch and distort with the animation. I want them to stay proportional. Also, I may need to figure out some sort of state checking? If I mouse off of the div quick enough, or several times, it'll start shrinking - I'm assuming because I moused-off before it could register anything? Not sure.

Getting ready to look into this, and I thought I'd see if anybody here could point me in the right direction.

Here's what I have:

html:

Code:

<!-- a sample div to animate on mouseover -->

<div class="square one" style="overflow:hidden;">

                        <div id="square_caption1" class="square_captions">The Text</div>

                        <div id="cf">

                                <img class="bottom" style="width:100%; height:100%;" src="images/1_color.jpg">

                                <img class="top" style="width:100%; height:100%;" src="images/1.jpg">

</div>

                        

                </div>

jquery

Code:

$(".square.one,#link_nest").mouseenter(function(){

    $(".square.one").animate({height:"+=10px",width:"+=10px"},200);

    $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);

    $("#square_caption1").css('visibility','visible');

  });

  

 $(".square.one,#link_nest").mouseleave(function(){

    $(".square.one").animate({height:"-=10px",width:"-=10px"},200);

    $("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);

    $("#square_caption1").css('visibility','hidden');

  });

and the css

Code:

#cf {

  position:relative;

  height:100%;

  width:100%;

  margin:0 auto;

}



#cf img {

  position:absolute;

  left:0;

  -webkit-transition: opacity .5s ease-in-out;

  -moz-transition: opacity .5s ease-in-out;

  -o-transition: opacity .5s ease-in-out;

  transition: opacity .5s ease-in-out;

}