仅使用 HTML 和 CSS 在图像顶部显示表格答案

【问题标题】：Displaying table on top of image with HTML and CSS only仅使用 HTML 和 CSS 在图像顶部显示表格
【发布时间】：2019-03-19 07:55:48
【问题描述】：

我想在我的图像前显示一个表格。悬停时图像的不透明度会发生变化，但当我将鼠标悬停在图像上时，表格的不透明度也会发生变化。

我已经尝试过更改桌子上的不透明度，但这似乎不起作用。（或者我可能做错了）。

代码只有 HTML 和 CSS，因为它将用于分配。

有谁知道如何解决这个问题？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ImageGallery {
  display: flex;
  flex-wrap: wrap;
}

.image {
  position: relative;
  display: flex;
  flex: 100%;
  padding: 1em;
  justify-content: center;
  align-items: center;
}

.imagehover {
  transition: all 0.5s linear;
}

.imagehover:hover img {
  opacity: 0.5;
}

.imageinfo {
  position: absolute;
  opacity: 0;
  transition: all 0.5s linear;
}

.imageinfo table {
  background-color: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
}

.imagehover td {
  padding: 0.5em;
}

.imageinfo:hover {
  opacity: 1;
}

.centered-text {
  position: absolute;
  top: 15%;
  left: 42.5%;
  transform: translate(-50%, -50%);
}

<div class="ImageGallery">
  <div class="image">
    <div class="imagehover">
      <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
        alt="Ferrari_LaFerrari">
      <div class="centered-text">
        <div class="imageinfo">
          <table>
            <tr>
              <td>Type</td>
              <td>Ferrari LaFerrari</td>
            </tr>
            <tr>
              <td>Motor</td>
              <td> </td>
            </tr>
            <tr>
              <td>Vermogen</td>
              <td> </td>
            </tr>
            <tr>
              <td>0-100 km/u</td>
              <td> </td>
            </tr>
            <tr>
              <td>Topsnelheid</td>
              <td> </td>
            </tr>
            <tr>
              <td>Gewicht</td>
              <td> </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="image">
    <div class="imagehover">
      <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
        alt="Ferrari_812_Superfast">
      <div class="centered-text">
        <div class="imageinfo">
          <table>
            <tr>
              <td>Type</td>
              <td>Ferrari 812 Superfast</td>
            </tr>
            <tr>
              <td>Motor</td>
              <td> </td>
            </tr>
            <tr>
              <td>Vermogen</td>
              <td> </td>
            </tr>
            <tr>
              <td>0-100 km/u</td>
              <td> </td>
            </tr>
            <tr>
              <td>Topsnelheid</td>
              <td> </td>
            </tr>
            <tr>
              <td>Gewicht</td>
              <td> </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css layout html-table hover

【解决方案1】：

变化：

.imagehover:hover {
    opacity: 0.5;
}

收件人：

.imagehover:hover img {
    opacity: 0.5;
}

这样您只更改图像的opacity，而不是包装图像和表格的容器。完全固定的sn-p：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ImageGallery {
  display: flex;
  flex-wrap: wrap;
}

.image {
  position: relative;
  display: flex;
  flex: 100%;
  padding: 1em;
  justify-content: center;
  align-items: center;
}

.imagehover {
  transition: all 0.5s linear;
}

.imagehover:hover img {
  opacity: 0.5;
}

.imageinfo {
  position: absolute;
  opacity: 0;
  transition: all 0.5s linear;
}

.imageinfo table {
  background-color: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
}

.imagehover td {
  padding: 0.5em;
}

.imageinfo:hover {
  opacity: 1;
}

.centered-text {
  position: absolute;
  top: 15%;
  left: 42.5%;
  transform: translate(-50%, -50%);
}

<div class="ImageGallery">
  <div class="image">
    <div class="imagehover">
      <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
        alt="Ferrari_LaFerrari">
      <div class="centered-text">
        <div class="imageinfo">
          <table>
            <tr>
              <td>Type</td>
              <td>Ferrari LaFerrari</td>
            </tr>
            <tr>
              <td>Motor</td>
              <td> </td>
            </tr>
            <tr>
              <td>Vermogen</td>
              <td> </td>
            </tr>
            <tr>
              <td>0-100 km/u</td>
              <td> </td>
            </tr>
            <tr>
              <td>Topsnelheid</td>
              <td> </td>
            </tr>
            <tr>
              <td>Gewicht</td>
              <td> </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="image">
    <div class="imagehover">
      <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg"
        alt="Ferrari_812_Superfast">
      <div class="centered-text">
        <div class="imageinfo">
          <table>
            <tr>
              <td>Type</td>
              <td>Ferrari 812 Superfast</td>
            </tr>
            <tr>
              <td>Motor</td>
              <td> </td>
            </tr>
            <tr>
              <td>Vermogen</td>
              <td> </td>
            </tr>
            <tr>
              <td>0-100 km/u</td>
              <td> </td>
            </tr>
            <tr>
              <td>Topsnelheid</td>
              <td> </td>
            </tr>
            <tr>
              <td>Gewicht</td>
              <td> </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：