css 带有图像和文本的面板

Question

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

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

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

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

我需要用这种方式在面板中放一张图片和一段文字。如果我将鼠标悬停在图像上，图像就会消失，文本就会出现。我能怎么做？我尝试了不同的技术，但他们失去了面板内的位置。有什么想法吗？

Answer 1

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

#bor_panel:hover img {
  display: none;
}

#bor_panel:hover span {
  margin: auto;
}

<div id="bor_panel">
  <img src="http://placehold.it/170x140">
  <span>Lorem ipsum</span>
</div>

Answer 2

css

#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;
}

html

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

Answer 3

无变化html。

#bor_panel {
  border-radius: 12px;
  border: 2px solid #297293;
  padding: 20px;
  width: 170px;
  height: 170px;
  background-image: url('http://placehold.it/170');
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

#bor_panel:hover {
  background-image: none;
}

#bor_panel:hover::after {
  content: 'Lorem ipsum';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

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

css 带有图像和文本的面板

css panel with image and text

html

css

panel

hover