html - 关于图片使用scale放大过程中，父元素overflow:hidden失效的问题

Question

想做出一个圆形图片，当鼠标hover的时候图片放大。本人做法是父p使用border-radius:50%+overflow:hidden做成圆形，当鼠标hover时，图片使用transform:scale(1.3,1.3)+transition:0.3s实现放大动画，但是使用transition遇到问题是图片在这0.3s的放大时间里会恢复成正方形而不是一直被父p的overflow限制成圆形，放大结束后才会变回圆形，放大过程如下图

想知道如何做才能使图片放大过程中仍然限定在父p的圆形里面，目前找到关键点是transition的有无，没有transition，图片一下子变大，这过程中不会变回正方形。

html

<p class="col-md-3">
   <p class="msg-wrap">
      <a class="msg-link" href="">
        <span class="msg-title">Why Us</span> 
        <img class="msg-img img-responsive" src="img/why_us.jpg" alt=""> 
        </a>
    </p>
</p>

css

.msg-wrap{
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.msg-title{
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    -moz-text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    -ms-text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    -o-text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.msg-img{
    -webkit-transition: all 3s;
    -o-transition: all 3s;
    transition: all 3s;
}
.msg-link:hover img{
    -webkit-transform: scale(1.3,1.3);
    -ms-transform: scale(1.3,1.3);
    -o-transform: scale(1.3,1.3);
    transform: scale(1.3,1.3);
}

Answer 1

This is related to CSS stack context. I have done a Q&A in another question, click here

Specific to your problem, the solution is to add .msg-wrap style to position: relative; z-index: 1.

Demo

Answer 2

Add "-webkit-mask-image: -webkit-radial-gradient(white, black)" in .msg-wrap.
Also, next time you ask, can you post a link with the code, like this jsbin example
Also, you have to be good at google, I found this answer on stackoverflow.

Answer 3

I feel that temporary animations such as scale and route are just instant modifications. For example, when route is used, the width becomes larger inexplicably, but the elements next to it are not squeezed out

Answer 4

.msg-img{
    -webkit-transition: width 3s, height 3s;
    -o-transition: width 3s, height 3s;
    transition: width 3s, height 3s;
}