html - 仅使用 HTML 和 CSS 在图像顶部显示表格

Question

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

我已经尝试过更改表格的不透明度，但似乎没有用。 (或者我可能做错了)。

代码只有 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>

Answer 1

改变:

.imagehover:hover {
    opacity: 0.5;
}

收件人:

.imagehover:hover img {
    opacity: 0.5;
}

因此您只是更改图像的不透明度，而不是包装图像和表格的容器。完整的固定片段:

* {
  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>