悬停在img上时，表格必须可见

时间：2018-10-09 20:29:30

标签： html css image html-table hover

这是我关于Stack Overflow的第一篇文章。 基本上，我正在尝试创建一个图库，其中包括汽车图片和有关汽车的信息。

我创建了一个表格，其中包含当我将鼠标悬停在图像上时想要看到的汽车的详细信息。

我尝试使用不透明性，但这似乎不起作用。还是我做错了什么？

我是否必须使用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 :(得分：0)

尝试此代码。.希望此代码将起作用！！！ 

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

答案 1 :(得分：0)

我已经更新了此代码，希望对您有用。

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

相关问题
最新问题