html - 当鼠标悬停在图像上时，使文本位于图像的中间

Question

当鼠标悬停在网页上时，我想在网页上的所有图像上添加一个标题(粗体)和一个副标题(非粗体)。我已经有了图像在悬停时变淡/变色的效果。以下是图片:https://imgur.com/a/xLXSUkx

这是它的 HTML 代码:

<div class="JA-linkWrap JA-Notprojects JA-NotObjects floatleft" style="width:300px;">

        <a href="https://canadacouncil.ca/initiatives/venice-biennale" 
        class="JA-projectPageLink">

          <img src="images/GRID/111%20jpeg%20grid.jpg" alt="" class="JA- 
newsmediaImage">
         <h2 class = "img_head"> The Octa. </h2>
         <p class = "img_description"> Arch. </p>

            </a>  

    </div>   

这是 .JA-linkWrap 的 CSS:

.JA-linkWrap {
   float: left;
   margin: 12px;
}

更多 CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
}


.JA-linkWrap img:hover {
    -webkit-filter: brightness(90%);
}


.img_head{
  position: absolute;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity.2s, visibility .2s;

}

.img_description{
  position:inherit;

  color:#000;
  visibility: hidden;
  opacity: 0;
  transition: opacity.2s, visibility .2s;
}

.JA-linkWrap:hover .img_description{
  visibility: visible;
  opacity: 1;
}



.JA-linkWrap:hover .img_head{
   visibility: visible;
  opacity: 1;
}

这是我将鼠标悬停在图像上时的尝试结果:https://imgur.com/a/Fkuf0eE 如您所见，图片的标题和描述都在图片下方。我希望它们位于图像的中心。 请具体说明，我是新手。

Answer 1

您应该为标题元素添加一个包装器，然后像图像框一样设置包装器的大小。然后使用 flexbox 垂直对齐包装内的标题。此外，删除宽度的内联样式:300px

.JA-linkWrap {
   float: left;
   margin: 12px;
  position: relative;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}


.JA-linkWrap:hover img {
    -webkit-filter: brightness(90%);
}


.img_head{
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity.2s, visibility .2s;
}

.img_description{
  color:#000;
  visibility: hidden;
  opacity: 0;
  transition: opacity.2s, visibility .2s;
}

.JA-linkWrap:hover .img_description, .JA-linkWrap:hover .img_head {
  visibility: visible;
  opacity: 1;
}

.title-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-direction: column; 
  justify-content: center;
  flex-wrap: wrap;
}

.title-wrapper .img_head, .title-wrapper .img_description {
    background-color: white;
}

<div class="JA-linkWrap JA-Notprojects JA-NotObjects floatleft">

        <a href="https://canadacouncil.ca/initiatives/venice-biennale" 
        class="JA-projectPageLink">

          <img src="https://picsum.photos/id/237/500/300" alt="" class="JA- 
newsmediaImage">
          
          <div class="title-wrapper">
         <h2 class = "img_head"> The Octa. </h2>
         <p class = "img_description"> Arch. </p>
          </div>

            </a>  

    </div>