Question

所以，我有包含一些照片的画廊。我希望在图像悬停时制作，然后显示该人的某些信息，人名和他们的角色。

＆＃13;

.gallery {
  position: relative;
  padding: 6px 6px;
  float: left;
  width: 24.99999%;
}

.flag {
  border: 1px solid #ccc;
  padding: 5px;
}

.flag img {
  display: block;
  width: 100%;
  height: auto;
}

.biodata {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  color: white;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

＆＃13;

<div class="gallery">
  <div class="flag">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <div class="biodata"> HIS NAME<br/> HIS JOB </div>
  </div>
</div>

＆＃13;

我使用叠加来显示信息，但为什么文字不按顺序而不在照片上？我希望它在照片的中间底部。有什么建议吗？谢谢。

Answer 1

请参阅此fiddle

CSS

.biodata {
      z-index:100;
    }
.flag:hover .biodata {
      height:100%
    }

Answer 2

使用此代码：

 <!DOCTYPE html>
    <html>
      <head>
        <style>
        .container {
          position: relative;
          width: 50%;
        }
        .image {
          display: block;
          width: 100%;
          height: auto;
        }
        .overlay {
          position: absolute;
          bottom: 100%;
          left: 0;
          right: 0;
          background-color: #008CBA;
          overflow: hidden;
          width: 100%;
          height:0;
          transition: .5s ease;

        }
        .container:hover .overlay {
          bottom: 0;
          height: 100%;

        }

        .text {

          white-space: nowrap; 
          color: white;
          font-size: 20px;
          position: absolute;
          overflow: hidden;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);

        }
        </style>
      </head>
      <body>
        <div class="container">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
      <div class="overlay">
        <div class="text">
        <p style="padding:20px;">I am Mr. Alven</p>
      </div>
      </div>
    </div>
      </body>
    </html>

Answer 3

下面是更新的代码段

＆＃13;

.gallery {
  position: relative;
  padding: 6px 6px;
  float: left;
  width: 24.99999%;
}

.flag {
  border: 1px solid #ccc;
  padding: 5px;
  position:relative;
}

.flag img {
  display: block;
  width: 100%;
  height: auto;

}

.biodata {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 0;
  
  overflow: hidden;
  color: white;
  width: calc(100% - 10px) ;
  height: 0;
  transition: .5s ease;
  display:block;
  background:rgba(0,0,0,0.5);
  
}
.flag:hover .biodata{
  height:calc(100% - 10px);
}

＆＃13;

<div class="gallery">
  <div class="flag">
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
    <div class="biodata"> HIS NAME<br/> President of INASGOC </div>
  </div>
</div>

＆＃13;

图像悬停时如何进行叠加

3 个答案: