时间戳

首页 > 解决方案 > 当鼠标悬停在图像上时，使文本位于图像中间

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

问题描述

当鼠标悬停在网页上时，我想在网页上的所有图像上添加一个标题（粗体）和一个副标题（非粗体）。我已经有了图像在悬停时褪色/改变颜色的效果。以下是图片：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 正如您所见，图像的标题和描述都在图像下方。我希望它们位于图像的中心。请具体一点，我是新手。

标签： htmlcss

解决方案

您应该为标题元素添加一个包装器，然后设置包装器的大小，就像图像的框一样。然后使用 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>

推荐阅读