SevicheCC/Urara-Blog
1
0
Fork 0
mirror of https://github.com/Sevichecc/Urara-Blog.git synced 2025-04-30 16:09:31 +08:00
Code Issues Projects Releases Packages Wiki Activity
Urara-Blog/urara/hover.md
Sevichecc f61521e837 merge update at Jul 26, 2022
2022-08-06 18:39:48 +08:00

479 B
Raw Blame History

title: CSS · hover时图片放大的动效 created 2022-01-13T16:03:47.000Z slug: hover-image-scale tags:

  • CSS Trick
  • CSS summary: 通过transform设置 lastmod: 2022-05-07T05:30:52.029Z

思路：

  1. 设置放大
  2. 隐藏溢出
.gallery-item {
  overflow: hidden;
}

.gallery-item img:hover {
  transform: scale(1.1);
}
.gallery-item img {
  display: block;
  width: 100%;
  transition: all 0.4s;
}

效果：https://codepen.io/sevichee/pen/wvrRjjq