【无标题】

C_c廿五廿五

已于 2023-03-04 15:44:30 修改

阅读量51

点赞数

文章标签： css html css3

于 2023-03-04 15:32:52 首次发布

本文链接：https://blog.csdn.net/weixin_44973229/article/details/129335089

版权

html鼠标悬停图片放大效果

body内部：

<div class="img-wrapper">
  <img src="tupian.jpg"/>
</div>

style.css内部：

.img-wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 400px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}

只是做个笔记，如果需要请看原创！！！！！

原创：http://t.csdn.cn/ozQiZ