html - 将图像悬停在圆形块中。如何修复chrome中的错误?
问题描述
当您悬停时,边框的边缘变为方形,然后变为圆形。在 Mozilla 中一切正常。如何修复这个错误?
.advantage {
display: flex;
align-items: flex-end;
padding: 16px;
background: #D8DCE3;
border-radius: 20px;
overflow: hidden;
height: 100px;
width: 300px;
position: relative;
}
.advantage img {
position: absolute;
top: 0;
left: 0;
transition: transform .3s;
filter: grayscale(100%);
border-radius: 10px;
object-fit: cover;
height: 100%;
width: 100%;
}
.advantage:hover img {
transform: scale(1.1);
filter: grayscale(0%);
}
<div class="advantage">
<img src="https://tympanus.net/Development/DistortionHoverEffect/img/Img22.jpg" alt="">
</div>
解决方案
推荐阅读
- javascript - Javascript中的独立倒计时
- excel - 在 VBA 项目参考中找不到适用于 Microsoft Office 的 SAS 插件
- excel - 应用于多个表格的多个单元格范围的 VBA 透视过滤器
- cobalt - 1分钟后面临youtube播放问题
- apache-camel - 直接在骆驼路线中归档,无需文件消费者
- xml - 如何在 PL/SQL 中使用 FOR LOOP 从具有相同标签的 xml clob 中提取值
- javascript - 如何在云 Firestore 中使用事务执行 OR 查询?
- android - 如何在改造android中调用动态请求方法
- python - 使每个唯一 ID 号 NAT 的熊猫数据框
- c# - 如何在 C# 中发送带有等待时间的电子邮件?