css3的overflow:hidden这里为什么不起作用，图片还是会溢出div呢？

Question

<div class="fangda"  >           

    <img src="1.jpg"  width="300px" height="150px">

</div>

<style type="text/css">

.fangda{

    width:300px;

    height:300px;

    display:inline-block;

    border:1px solid red;

}

img:hover{

    overflow:hidden    ;

    transition:0.2s;

    transform:scale(2);                        

}

</style>