如何在悬停时裁剪带有圆角边框的图像

huangapple
go评论91阅读模式
英文:

How can I crop an image with a border-radius when hover

问题

当鼠标悬停时，如何裁剪带有56px边框半径的图像？

像这样

如何在悬停时裁剪带有圆角边框的图像

（只是我的，我想要有56px定义的CSS边框）

  1. .image-wrapper {
  2.   width: 200px;
  3.   height: 200px;
  4. }
  6. img {
  7.   width: 100%;
  8.   height: 100%;
  9.   object-fit: cover;
  10.   border-radius: 56px; /* 修改为56px */
  11.   transition: .5s;
  12. }
  14. img:hover {
  15.   /* 在这里添加其他样式以实现悬停效果 */
  16. }
  1. <div class="image-wrapper">
  2.   <img src="https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg">
  3. </div>
英文:

How can I crop a image with a border-radius of 56px when hover?

Like this

如何在悬停时裁剪带有圆角边框的图像

(just mine I want to have a css defined border of 56px)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1.  .image-wrapper {
  2.   width: 200px;
  3.    height: 200px;
  4.  }
  5.  
  6.  img {
  7.       width: 100%;
  8.       height: 100%;
  9.       object-fit: cover;
  10.       border-radius: 50px
  11.       transition: .5s;
  12.     }
  13.     img:hover {
  14.       
  15.     }

<!-- language: lang-html -->

  1.     &lt;div class=&quot;image-wrapper&quot;&gt;
  2.     &lt;img src=&quot;https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg&quot;&gt;
  3.     &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 3

使用 clip-path：

  1. img {
  2.   clip-path: inset(0 round 50px);
  3.   transition: .5s;
  4. }
  5. img:hover {
  6.   /* crop by 10px */
  7.   clip-path: inset(10px round 50px);
  8. }
  1. <img src="https://picsum.photos/id/1074/300/300">
英文:

Use clip-path:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. img {
  2.   clip-path: inset(0 round 50px);
  3.   transition: .5s;
  4. }
  5. img:hover {
  6.   /* crop by 10px */
  7.   clip-path: inset(10px round 50px);
  8. }

<!-- language: lang-html -->

  1. &lt;img src=&quot;https://picsum.photos/id/1074/300/300&quot;&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月15日 06:01:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76477851.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定