想做出一个圆形图片,当鼠标hover的时候图片放大。本人做法是父div使用border-radius:50%+overflow:hidden做成圆形,当鼠标hover时,图片使用transform:scale(1.3,1.3)+transition:0.3s实现放大动画,但是使用transition遇到问题是图片在这0.3s的放大时间里会恢复成正方形而不是一直被父div的overflow限制成圆形,放大结束后才会变回圆形,放大过程如下图
想知道如何做才能使图片放大过程中仍然限定在父div的圆形里面,目前找到关键点是transition的有无,没有transition,图片一下子变大,这过程中不会变回正方形。
html
css
.msg-wrap{
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
overflow