Таблица должна быть видна при наведении на img - PullRequest
Новая
       7

Таблица должна быть видна при наведении на img

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

Это мой первый пост о переполнении стека.По сути, я пытаюсь создать галерею изображений, включая фотографии автомобилей и информацию об автомобилях.

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

Я пытался работать с непрозрачностью, но, похоже, это не сработало.Или я что-то не так делаю?

Нужно ли использовать JavaScript для отображения / скрытия таблиц, а затем сообщите об этом.

HTML: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Image Gallery</title>
  </head>

  <body>


    <div class="ImageGallery">


        <div class="image">
          <div class="imagehover">
               <img src="C:/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/LaFerrari.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="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/812_Superfast.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 class="image">
              <div class="imagehover">
                  <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_GTB.jpg" alt="Ferrari_488_GTB">
              </div>
            </div>

              <div class="image">
                <div class="imagehover">
                    <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/488_Pista.jpg" alt="Ferrari_488_Pista">
                </div>
              </div>

                <div class="image">
                  <div class="imagehover">
                      <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso.jpg" alt="Ferrari_GTC4Lusso">
                  </div>
                </div>

                  <div class="image">
                    <div class="imagehover">
                        <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/GTC4Lusso_T.jpg" alt="Ferrari_GTC4Lusso_T">
                    </div>
                  </div>

                    <div class="image">
                      <div class="imagehover">
                          <img src="/Users/Bram/Desktop/Websites/2018-2019/Ferrari/Images/Auto's/Portofino.jpg" alt="Ferrari_Portofino">
                      </div>
                    </div>

        </div>

  </body>

</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:hover {
  opacity: 0.1;
  transition: 1s ease;
}

.imagehover:hover .imageinfo{
  opacity: 0.5;
  z-index: 2;
}

.imageinfo{
  position: absolute;
  opacity: 0;
}

.imageinfo table{
  background-color: #FFFFFF;
}

.imagehover td{
  padding: 0.5em;
}

.imageinfo:hover{
  transition: 0.5s ease;
}

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


@media screen and (min-width: 1024px){

  .ImageGallery{
    flex-direction: row;
    }

  .image{
    flex: 50%;
  }
}

Ответы [ 2 ]

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

Я обновил этот код Надеюсь, это сработает для вас. 

* {
    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 .imageinfo{
  opacity: 0.5;
  z-index: 2;
}
.imageinfo{
  position: absolute;
  opacity: 0;
  transition: all 0.5s linear;//added
}

.imageinfo table{
    border: 1px solid #000;
    background-color: #FFFFFF;
    position: absolute;
    top: -23px;
}

.imagehover td{
  padding: 0.5em;
  border: 1px solid #000;
}

.imageinfo:hover{
  opacity: 0.5; //added
/*   transition: 0.5s ease; *///remove
}

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


@media screen and (min-width: 1024px){

  .ImageGallery{
    flex-direction: row;
    }

  .image{
    flex: 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 class="image">
              <div class="imagehover">
                  <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_GTB">
              </div>
            </div>

              <div class="image">
                <div class="imagehover">
                    <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_Pista">
                </div>
              </div>

                <div class="image">
                  <div class="imagehover">
                      <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso">
                  </div>
                </div>

                  <div class="image">
                    <div class="imagehover">
                        <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso_T">
                    </div>
                  </div>

                    <div class="image">
                      <div class="imagehover">
                          <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_Portofino">
                      </div>
                    </div>

        </div>
 Run code snippetHide results
0 голосов
/ 10 октября 2018

попробуйте этот код .. надеюсь, этот код будет работать !!! 

* {
    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 .imageinfo{
  opacity: 1;
  z-index: 2;
}
.imageinfo{
  position: absolute;
  opacity: 0;
  transition: all 0.5s linear;//added
}

.imageinfo table{
  background-color: #FFFFFF;
}

.imagehover td{
  padding: 0.5em;
}

.imageinfo:hover{
  opacity: 1; //added
/*   transition: 0.5s ease; *///remove
}

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


@media screen and (min-width: 1024px){

  .ImageGallery{
    flex-direction: row;
    }

  .image{
    flex: 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 class="image">
              <div class="imagehover">
                  <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_GTB">
              </div>
            </div>

              <div class="image">
                <div class="imagehover">
                    <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_488_Pista">
                </div>
              </div>

                <div class="image">
                  <div class="imagehover">
                      <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso">
                  </div>
                </div>

                  <div class="image">
                    <div class="imagehover">
                        <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_GTC4Lusso_T">
                    </div>
                  </div>

                    <div class="image">
                      <div class="imagehover">
                          <img src="https://image.ibb.co/e52J19/photo_1494905998402_395d579af36f.jpg" alt="Ferrari_Portofino">
                      </div>
                    </div>

        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...