Html 带有图像和文本的css面板

我有一个css边框面板，用以下代码呈现：

#bor_panel {
border-radius: 12px;
border: 2px solid #297293;
padding: 20px; 
width: 170px;
height: 170px;    
}

并以这种方式在页面中使用：

<div id="bor_panel"></div>

我需要以这种方式在面板中放置一个图像和一个文本。如果我用鼠标悬停图像，图像将消失，文本将出现。我该怎么办？我尝试了不同的技术，但他们失去了在面板中的位置。 有什么想法吗？

#bor#u面板{
边界半径：12px；
边框：2px实心#297293；
填充：20px；
宽度：170px；
高度：170px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：之间的空间；
}
#bor_面板：悬停img{
显示：无；
}
#bor_面板：悬停跨度{
保证金：自动；
}

乱数假文

css

html

插入图像
文本

不改变html

#bor#u面板{
边界半径：12px；
边框：2px实心#297293；
填充：20px；
宽度：170px；
高度：170px；
背景图像：url（'http://placehold.it/170');
背景重复：无重复；
背景位置：中心；
位置：相对位置；
}
#bor_面板：悬停{
背景图像：无；
}
#bor_面板：悬停：：之后{
内容：“Lorem ipsum”；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

---

完美！如果我想在原始图像下添加文本？这段文字会随着鼠标悬停消失！如果我想在原始图像下添加文本？这段文字随着我的名字消失了，很抱歉英语不是我的母语。不明白挂起的是什么？如果必须消失的内容是图像+图像下的文本？那么您需要更改html。我改变了我的回答。看到了。对不起，我没看到这个新的部分。

#bor_panel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 2px solid #297293;
  padding: 20px; 
  width: 170px;
  height: 170px;    
}

#bor_panel:hover .image{
  display: none;
}

#bor_panel:hover h4{
  display: block;
}

h4{
  display: none;
}

<div id="bor_panel">
    <div class="image">insert image</div>
    <h4>text</h4>
</div>