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

问题描述

问 题

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

解决方案

HTML

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

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);
}

这篇关于javascript - html5实现鼠标悬停图片放大效果，圆形框不动，里面的图片放大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！