Javascript 转换：转换属性有问题

当我的图像悬停在上方时，我试图使图标出现。我将transform:translate属性设置为从0开始，但是当页面加载时，它在一瞬间仍然可见。我希望它在悬停时才可见。有人知道发生了什么事吗

 <div class="item green col-lg-3 col-md-6">
      <a href="/blog/<%= blog._id %>"><img src="<%=blog.source%>" class="index_image" alt="Blog post with image."></a>
      <a style="color:black" href="/blog/<%= blog._id %>"><i class="far fa-eye"></i></a>
 </div>

---

我已经包含了一些相关的代码，但如果需要，当然可以提供更多

我不确定您是否需要这些额外的转换，它可以用简单的不透明度来解决

.index\u图像{
宽度：200px；
}
分部项目{
位置：相对位置；
显示：内联块；
}
分区项目：悬停img{
不透明度：0.5；
过滤器：灰度（50%）
}
第一项{
位置：绝对位置；
顶部：5px；
左：5px；
不透明度：0；
}
分区项目：悬停i{
不透明度：1；
}
分部项目*{
过渡：所有.35都易于输入输出；
}

---

我不确定您是否需要这些额外的转换，它可以通过简单的不透明度来解决

.index\u图像{
宽度：200px；
}
分部项目{
位置：相对位置；
显示：内联块；
}
分区项目：悬停img{
不透明度：0.5；
过滤器：灰度（50%）
}
第一项{
位置：绝对位置；
顶部：5px；
左：5px；
不透明度：0；
}
分区项目：悬停i{
不透明度：1；
}
分部项目*{
过渡：所有.35都易于输入输出；
}

谢谢！！真不敢相信我居然没想到！谢谢真不敢相信我居然没想到！

div.item:hover img {
    opacity: 0.5;
    filter: grayscale(50%)
  }
div.item i {
    transform: translate(-600%, -150%) scale(0);
    transition: transform 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

div.item:hover i {
    transform: translate(-600%, -150%) scale(2.5);
    transition: transform 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
div.item * {
   transition: all .35s ease-in-out;
  }