CSS悬停文本，应显示图像

我想有一个像“这里”这样的词，当我把鼠标悬停在上面，在这个词的上方，应该会显示一个图像。

---

我发现了很多关于如何在悬停状态下替换图像或执行其他操作的代码，但我希望它是这样的：在文本上方，背景中的样式不应受到干扰。

下面是一个示例

<div class="here">Here</div>
<img src="link/to/file.png" class="image" alt="photo" style="display: none;" />

剩下的将使用CSS应用，例如

position: absolute;
top: 0;

所有其他CSS属性都可以直接应用于图像，但是使用jQuery中的

.show（）

来显示图像，您不能在CSS中这样做。

这里
<div class="comment">Here
<img class="image" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png">
</div>
.comment .image {
   display: none;   
}  

.comment:hover .image {
   display: block;
} 

.评论.图片{
显示：无；
}  
.comment:hover.image{
显示：块；
} 

---

一些您已经尝试过的例子会很棒！OP没有用jqueryVery nice标记此问题，谢谢。您能否添加代码，使前后的文本不会通过图像在设计中发生更改？目前，图像将显示，图像后的文本将无法再看到。@Kovu抱歉，我无法正确获取您的信息，请您澄清，或者更好地编辑并重新发布

<div class="comment">Here
<img class="image" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png">
</div>
.comment .image {
   display: none;   
}  

.comment:hover .image {
   display: block;
}