## 标题悬停标题放大图片特效

最新推荐文章于 2021-10-11 15:31:41 发布

m0_52061319

最新推荐文章于 2021-10-11 15:31:41 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/m0_52061319/article/details/115372114

版权

标题悬停标题放大图片特效

  首先用盒子div包裹img标签，这个div的作用是包裹层这个包裹层是用来遮挡住图片，当图片放大时不会出现图片超出我们规定的宽高以外。
先给div宽高属性也就是height和width，然后在给这个元素overflow：hidden属性。让图片放大不会超过盒子元素的宽高

transform：scale（1，1）作为图片悬停时的特效
此transform是用于改变任何元素的属性的，然后scale放大（正数就会放大）（负数就会缩小）
flew-grow是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间。如果我们使用flex-grow: 0，那这个flex元素就完全不会扩展。所以需要把头部和底部之间的内容标签元素设置为flex-grow: 1或者flex-grow: auto，这样内容部分就会自动填充满头部和底部之外的所有空间。

     为了避免底部内容受内容部分扩充空间的影响，给footer底部元素flex-shrink: 0属性。flex-shrink的作用与flex-grow是恰恰相反，用来控制flex元素收缩的空间，这里我们给了flex-shrink: 0就是为了底部footer的大小不受影响。

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