SevicheCC/Urara-Blog
1
0
Fork 0
mirror of https://github.com/Sevichecc/Urara-Blog.git synced 2025-05-01 05:59:30 +08:00
Code Issues Projects Releases Packages Wiki Activity
Urara-Blog/urara/hover/+page.md
sevichecc 381f3b952b migrate route
2022-09-07 23:29:18 +08:00

480 B
Raw Blame History

title created slug tags summary lastmod
CSS · hover时图片放大的动效 2022-01-13T16:03:47.000Z hover-image-scale
CSS Trick
CSS
通过transform设置 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