为什么我不能在css中对图像进行过渡?

2022-01-28 09:46:02 标签 htmlcssimage

所以我有一个div包含一些标识。当我悬停在他们应该变成颜色而不是灰色和弹出,但由于某种原因过渡不工作。

下面是div在html中的代码:

<div class="clients">
      <img src="img/myob.png">
     <img src="img/belimo.png">
      <img src="img/LifeGroups.png">
      <img src="img/Lilly.png">
      <img src="img/Trustly.png">
      <img src="img/Citrus.png">
    </div>

css代码:

.clients{
  width:100%;
  height:120px;
  background-color: #f1f1f1;
  align-items: right;
  justify-content: center;
}
.clients img{
  display:inline-block;
  margin-left: 100px;
  width:100px;
  height:100px;
  padding: 15px 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  object-fit: contain;
  filter: grayscale(100);
}

所以我使用过渡来让图像弹出并变成彩色,但当我悬停在上面时,没有反应。

div图片:

它应该是:

###过渡工作在图像。检查下面的代码片段。

img {
  width: 200px;
  filter: grayscale(100);
  transition: all 0.3s ease;
}
img:hover {
  filter: grayscale(0);
}
<span>
  <img src="https://assets.dragoart.com/images/11939_501/how-to-draw-iron-man-easy_5e4c9ed9b16b58.14188289_53732_3_3.png" />
</span>

###你似乎没有:hover语句尝试添加这个:

.clients img:hover{
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  filter: grayscale(0%);
}
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码