html - 图像悬停时如何叠加

Question

所以，我有一个包含一些照片的图库。我想在图像悬停时显示该人的一些信息，该人的姓名及其 Angular 色。

.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;
}

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

我使用叠加层使信息显示出来，但为什么文字不整齐且不在照片上？我想要它在照片的中间底部。有什么建议吗？之前谢谢。

Answer 1

下面是更新的片段

.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);
}

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