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

Posted 2023-03-06

【中文标题】仅使用 HTML 和 CSS 在图像顶部显示表格

【英文标题】：Displaying table on top of image with HTML and CSS only

【发布时间】：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"
        >
      <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"
        >
      <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>

【参考方案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"
        >
      <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"
        >
      <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>