javascript - html5实现鼠标悬停图片放大效果，圆形框不动，里面的图片放大？

Question

多数实现鼠标悬停图片放大效果的案例都是方形的，方形的框不动，里面的内容放大，我想要圆形的框不动，里面的内容放大，该如何处理呢？

Answer 1

HTML

<p class="circle-wrapper">
  <img src="" >
</p>

CSS

.circle-wrapper,
.circle-wrapper img {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-transition: .3s;
  transition: .3s;
}

.circle-wrapper {
  border: 1px solid #ddd;
  position: relative;
  overflow: hidden;
}

.circle-wrapper img {
  position: absolute;
}

.circle-wrapper img:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
}

Answer 2

楼上写的样式可以参考下哦

Answer 3

谢邀 。css3的transform。一楼有代码

Answer 4

兼容版的思路，p内包含img，鼠标悬停时，图片增大，图片位置也对应调整