带有图像和文本的 CSS 面板答案

【问题标题】：css panel with image and text带有图像和文本的 CSS 面板
【发布时间】：2018-05-17 04:46:05
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： html css hover panel

【解决方案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>

【讨论】：

完美！如果我会在原始图像下添加文字？并且此文本会随着悬停而消失

【解决方案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>

【讨论】：

【解决方案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%);
}

&lt;div id="bor_panel"&gt;&lt;/div&gt;

【讨论】：

完美！如果我会在原始图像下添加文字？并且此文本会随着悬停而消失
抱歉英语不是我的母语。不明白挂的是什么？
如果要消失的内容是图片下的图片+文字？
那你需要改html。我改变了我的另一个答案。看看吧。
抱歉，我没有看到这个新部分。