Отображение таблицы поверх изображения только с HTML и CSS - PullRequest
Новая
       11

Отображение таблицы поверх изображения только с HTML и CSS

0 голосов
/ 15 октября 2018

Я хочу отобразить таблицу перед моим изображением.Непрозрачность изображения изменяется при наведении, но таблица также изменяется в непрозрачности при наведении курсора на изображение.

Я уже пытался изменить непрозрачность на столе, но, похоже, это не сработало.(или я, возможно, сделал это неправильно).

Код должен быть только 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>

1 Ответ

0 голосов
/ 15 октября 2018

Изменение: 

.imagehover:hover {
  opacity: 0.5;
}

На: 

.imagehover:hover img {
  opacity: 0.5;
}

Так что вы изменяете только opacity изображения, а не контейнер, который оборачивает изображение и вашу таблицу,Полный исправленный фрагмент: 

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