如何实现鼠标悬停图片放大的效果

两种方式：

<style>
.a1{width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;}
.pic{position:absolute;}
</style>

<div class="a1">
    <img src="1.jpg" width="137" height="138" class="pic" />
</div>

1.css实现鼠标悬浮图片放大

img {
    width: 100%;
    /* height: auto; */
    transform: scale(1);
    transition: transform 1s ease 0s;
}

img:hover {
    transform: scale(1.05);
}

2.js实现鼠标悬浮图片放大

<script> 
    $(function(){
        $w = $('.pic').width();
        $h = $('.pic').height();
        $w2 = $w + 20;
        $h2 = $h + 20;

        $('.pic').hover(function(){
             $(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);
        },function(){
             $(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);
        });
    }); 
</script>