关于css:如何实现鼠标悬停图片放大的效果

两种形式：

<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>