在Javascript中创建淡入/淡出效果

我有javascript中的网格类，当鼠标悬停在某些区域时，会显示不同的图像。我希望此图像在显示时淡入/淡出。 在此举一个效果的例子（无法理解它是如何产生的）：

我不知道该怎么做，因为我没有直接使用CSS:hover。 有线索吗

for（设i=0；i

#显示图像{
显示：无；
位置：绝对位置；
宽度：30%；
}

您可以使用纯CSS实现这一效果。使用纯CSS可以简化代码，还可以使用CSS转换。 以下是您可以做的简要说明：

• 将普通元素放入Div中（如示例中的富裕文本）
• 使您的Div的位置

  相对
  。这将允许您将某些元素放置在Div的内部

• 创建一个通常透明的覆盖元素
• 将图像放入覆盖层中，使其不可见：

  opacity:0

• 悬停覆盖元素后，可以更改其中图像的不透明度：

  div.overlay:hover>img{opacity:1}

.container{
宽度：500px；
高度：500px；
背景：黑色；
溢出：隐藏；
位置：相对位置；
}
h1{
文本对齐：居中；
颜色：#ffffff；
边缘顶部：30px；
}
.覆盖{
宽度：100%；
身高：100%；
背景：透明；
位置：绝对位置；
排名：0；
左：0；
}
.叠加img{
宽度：200px；
位置：绝对位置；
底部：50px；
右：20px；
过渡：均为0.5s；
不透明度：0；
}
.覆盖：悬停>图像{
不透明度：1；
}

这里有一些文字

您能提供最少的代码来使用snippet editor？it（dustinthierry）复制此代码吗只需使用

：hover

psuedo选择器和

transition:opacity.2s

——我可以很容易地在浏览器的inspect元素中找到它。感谢您的帮助！不幸的是，图像网格与我用javascript构建的hover网格不同，因此我需要保持这种方式。