SevicheCC/Urara-Blog
1
0
Fork 0
mirror of https://github.com/Sevichecc/Urara-Blog.git synced 2025-04-30 18:19:30 +08:00
Code Issues Projects Releases Packages Wiki Activity
Urara-Blog/urara/hover.md
Sevichecc 330de1dee2 init
2022-08-01 13:50:59 +08:00

477 B
Raw Blame History

title date 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