英文:
How can I crop an image with a border-radius when hover
问题
当鼠标悬停时，如何裁剪带有56px边框半径的图像？
像这样
（只是我的，我想要有56px定义的CSS边框）
.image-wrapper {
width: 200px;
height: 200px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 56px; /* 修改为56px */
transition: .5s;
}
img:hover {
/* 在这里添加其他样式以实现悬停效果 */
}
<div class="image-wrapper">
<img src="https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg">
</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 -->
.image-wrapper {
width: 200px;
height: 200px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50px
transition: .5s;
}
img:hover {
}
<!-- language: lang-html -->
<div class="image-wrapper">
<img src="https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg">
</div>
<!-- end snippet -->
答案1
得分: 3
使用 clip-path：
img {
clip-path: inset(0 round 50px);
transition: .5s;
}
img:hover {
/* crop by 10px */
clip-path: inset(10px round 50px);
}
<img src="https://picsum.photos/id/1074/300/300">
英文:
Use clip-path:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
img {
clip-path: inset(0 round 50px);
transition: .5s;
}
img:hover {
/* crop by 10px */
clip-path: inset(10px round 50px);
}
<!-- language: lang-html -->
<img src="https://picsum.photos/id/1074/300/300">
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论