在图像上悬停可见图像信息？

Question

我有6张全宽的带柔性网格的图像。我要怎么做，图像信息（以及访问按钮）应该出现在悬停上，图像亮度应该下降，我在将信息放置在图像中心时遇到问题吗？在这种情况下，是否应该将相对位置用于图像，将绝对位置用于图像信息？预先感谢

#works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center; 

}


#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;

}

#works .flex-container .box {  
  display: flex; 
  flex-direction: column; 
  margin: 0; 
  padding: 0; 
  width: 33.3333%;

}

#works .flex-container .box img {    
  display: block;
  padding: 0;
  width: 100%;
}

.page-info {
  position: absolute;;
  padding: 0em 1em;
  bottom: 0.5em; 
 color: whitesmoke;
  visibility: hidden;
}

#works .flex-container .box:hover .page-info{
visibility: visible;
}

#works .flex-container .box:hover .page-img {
filter: brightness(30%); 
}



#works .flex-container .box h4 {
  font-size: 1.8rem;


}
#works .flex-container .box p {
  font-size: 1rem;
}

.button {
  background: #3D4C53;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  letter-spacing: .5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: .2s;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
.btnTwo {
  position: relative;
  width: 200px;
  height: 100px;
  margin-top: -100px;
  padding-top: 2px;
  background : rgb(96, 212, 185);
  left : -250px;
  transition : .3s;
}
.btnText {
  padding:0;
  color : white;
  transition : .3s;
}
.btnText2 {
  margin-top : 60px;
  margin-right : -135px;
  letter-spacing: .2rem;
  font-size: 1rem;
  color : #FFF;
}
.button:hover .btnTwo{ 
  left: -130px;
}
.button:hover .btnText{ 
  margin-left : 70px;
}
.button:active { 
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}

<section>
<div class="flex-container">

        <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>


    </div>
</section>

Answer 1

您需要：

将position:relative设置为.box元素

将每个.box视为一个单独的display:flex元素

添加flex-flow: column wrap来告知flex元素以列而不是行内联

添加justify-content: center以使内容居中（对齐是相对于flex元素的流而言的）

从h4（标题）中删除边距顶部以修复居中

提琴here

#works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center;
}

#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;
}

#works .flex-container .box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: 33.3333%;
}

#works .flex-container .box img {
  display: block;
  padding: 0;
  width: 100%;
}

.page-info {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  color: whitesmoke;
  visibility: hidden;
}

#works .flex-container .box:hover .page-info {
  visibility: visible;
}

#works .flex-container .box:hover .page-img {
  filter: brightness(30%);
}

#works .flex-container .box h4 {
  font-size: 1.8rem;
  margin-top: 0;
}

#works .flex-container .box p {
  font-size: 1rem;
}

.button {
  background: #3D4C53;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  letter-spacing: 0.5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: .2s;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

.btnTwo {
  position: relative;
  width: 200px;
  height: 100px;
  margin-top: -100px;
  padding-top: 2px;
  background: rgb(96, 212, 185);
  left: -250px;
  transition: 0.3s;
}

.btnText {
  padding: 0;
  color: white;
  transition: 0.3s;
}

.btnText2 {
  margin-top: 60px;
  margin-right: -135px;
  letter-spacing: 0.2rem;
  font-size: 1rem;
  color: #FFF;
}

.button:hover .btnTwo {
  left: -130px;
}

.button:hover .btnText {
  margin-left: 70px;
}

.button:active {
  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.3);
}

<section id="works">
  <div class="flex-container">

    <div class="box">

      <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
      <div class="page-info">
        <h4>Title</h4>
        <div class="features">
          <p>Textt</p>

        </div>
        <a href="#" target="_blank" class="button">
          <p class="btnText">VISIT</p>
          <div class="btnTwo">
            <p class="btnText2">NOW!</p>
          </div>
        </a>
      </div>


    </div>
    <div class="box">

      <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
      <div class="page-info">
        <h4>Title</h4>
        <div class="features">
          <p>Textt</p>

        </div>
        <a href="#" target="_blank" class="button">
          <p class="btnText">VISIT</p>
          <div class="btnTwo">
            <p class="btnText2">NOW!</p>
          </div>
        </a>
      </div>


    </div>
    <div class="box">

      <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
      <div class="page-info">
        <h4>Title</h4>
        <div class="features">
          <p>Textt</p>

        </div>
        <a href="#" target="_blank" class="button">
          <p class="btnText">VISIT</p>
          <div class="btnTwo">
            <p class="btnText2">NOW!</p>
          </div>
        </a>
      </div>


    </div>
    <div class="box">

      <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
      <div class="page-info">
        <h4>Title</h4>
        <div class="features">
          <p>Textt</p>

        </div>
        <a href="#" target="_blank" class="button">
          <p class="btnText">VISIT</p>
          <div class="btnTwo">
            <p class="btnText2">NOW!</p>
          </div>
        </a>
      </div>


    </div>
    <div class="box">

      <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
      <div class="page-info">
        <h4>Title</h4>
        <div class="features">
          <p>Textt</p>

        </div>
        <a href="#" target="_blank" class="button">
          <p class="btnText">VISIT</p>
          <div class="btnTwo">
            <p class="btnText2">NOW!</p>
          </div>
        </a>
      </div>


    </div>
    <div class="box">

      <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
      <div class="page-info">
        <h4>Title</h4>
        <div class="features">
          <p>Textt</p>

        </div>
        <a href="#" target="_blank" class="button">
          <p class="btnText">VISIT</p>
          <div class="btnTwo">
            <p class="btnText2">NOW!</p>
          </div>
        </a>
      </div>


    </div>


  </div>
</section>

Answer 2

您需要相对于父级提供位置，以使悬停工作正常。

请在下面检查更新的代码

 #works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center; 

}


#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;

}

#works .flex-container .box {  
  display: flex; 
  flex-direction: column; 
  margin: 0; 
  padding: 0; 
  width: 33.3333%;

}

#works .flex-container .box img {    
  display: block;
  padding: 0;
  width: 100%;
}

.page-info {
      position: absolute;
    padding: 0em 1em;
    bottom: 0.5em;
    color: whitesmoke;
    /* visibility: hidden; */
    display: none;
}

#works .flex-container .box:hover .page-info{
visibility: visible;
}

#works .flex-container .box:hover .page-img {
filter: brightness(30%); 
}



#works .flex-container .box h4 {
  font-size: 1.8rem;


}
#works .flex-container .box p {
  font-size: 1rem;
}

.button {
  background: #3D4C53;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  letter-spacing: .5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: .2s;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
.btnTwo {
  position: relative;
  width: 200px;
  height: 100px;
  margin-top: -100px;
  padding-top: 2px;
  background : rgb(96, 212, 185);
  left : -250px;
  transition : .3s;
}
.btnText {
  padding:0;
  color : white;
  transition : .3s;
}
.btnText2 {
  margin-top : 60px;
  margin-right : -135px;
  letter-spacing: .2rem;
  font-size: 1rem;
  color : #FFF;
}
.button:hover .btnTwo{ 
  left: -130px;
}
.button:hover .btnText{ 
  margin-left : 70px;
}
.button:active { 
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}
.box{position:relative}
.box:hover .page-info {
    display: block;
}

<section>
<div class="flex-container">

        <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
             <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>


    </div>
</section>

Answer 3

将position: relative添加到.box并删除margin中的负left和.btntwo。希望对您有帮助

#works {
  color: rgba(31, 31, 31, 0.767);
  padding: 0;
  text-align: center; 

}


#works .flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: stretch;

}

#works .flex-container .box {  
  display: flex; 
  flex-direction: column; 
  margin: 0; 
  padding: 0; 
  width: 33.3333%;

}

#works .flex-container .box img {    
  display: block;
  padding: 0;
  width: 100%;
}

.page-info {
  position: absolute;;
  padding: 0em 1em;
  bottom: 0.5em; 
 color: whitesmoke;
  visibility: hidden;
}

.flex-container .box:hover .page-info{
visibility: visible;
}

#works .flex-container .box:hover .page-img {
filter: brightness(30%); 
}



#works .flex-container .box h4 {
  font-size: 1.8rem;


}
#works .flex-container .box p {
  font-size: 1rem;
}

.button {
  background: #3D4C53;
  width: 100%;
  height: 50px;
  overflow: hidden;
  margin-top: -5px;
  letter-spacing: .5rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: .2s;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}
.btnTwo {
  position: relative;
  width: 200px;
  height: 100px;
  padding-top: 2px;
  background : rgb(96, 212, 185);
  transition : .3s;
}
.btnText {
  padding:0;
  color : white;
  transition : .3s;
}
.btnText2 {
  margin-top : 60px;
  letter-spacing: .2rem;
  font-size: 1rem;
  color : #FFF;
}

.button:active { 
  box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}

.box{
  position: relative;
}

<div class="flex-container">
        <div class="box">
            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
         <div class="box">

            <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
            <div class="page-info">
                <h4>Title</h4>
                <div class="features">
                    <p>Textt</p>

                </div>
                <a href="#" target="_blank" class="button">
                    <p class="btnText">VISIT</p>
                    <div class="btnTwo">
                        <p class="btnText2">NOW!</p>
                    </div>
                </a>
            </div>


        </div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
         <div class="box">

        <img src="https://source.unsplash.com/random/800x800" alt="weather_app">
        <div class="page-info">
            <h4>Title</h4>
            <div class="features">
                <p>Textt</p>

            </div>
            <a href="#" target="_blank" class="button">
                <p class="btnText">VISIT</p>
                <div class="btnTwo">
                    <p class="btnText2">NOW!</p>
                </div>
            </a>
        </div>


</div>
    </div>
</section>