CSS 悬停效果，图形和 figcaption 叠加

Question

寻找一些样式 CSS 帮助。我想创建一个带有居中文本的图像框（应该是链接），该文本框显示在具有彩色半透明覆盖背景的图像上。我们有这样的 HTML：

<div class="figure">
  <a href="#" class="link1">
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
    <div class="figcaption">Klematis</div>
  </a>
</div>

代码类似于 HTML5 中的 figure/figcaption 结构。 情况如下： https://codepen.io/anon/pen/dYaYqV

悬停时覆盖背景应该隐藏（就是这种情况），并且图像的不透明度增加到完全。

问题 1： 文本不以这样的位置设置居中（绝对）。

问题 2： 由于我认为元素的某些样式，此示例中的叠加层更大（在图像底部）。叠加层应与图像完全相同。

问题 3： 在 img 鼠标悬停期间，文本应隐藏和覆盖

如果可能，不要 JS，只有 CSS。你能帮我吗？谢谢，J。

Answer 1

我已经稍微编辑了您的 codepen 示例，我认为这正是您想要的 HTML：

 <div id="1" class="figure">
  <a href="#" class="link1">
    <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
    <div class="figcaption"><h4>Klematis</h4></div>
  </a>
</div>

CSS：

.figure {
    position: relative;
    float: left;
    width: 10%;
    margin-right: 1%;
    left:20px;
}
.figure a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:2;
}
.figure a img{
  width:100%;
  display:block;
}
.figcaption {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-align: center;
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    z-index: 2;
    height:100%;
    background-color:rgba(0,0,0,.4);
    transition:background-color 0.4s ease;

}
.figcaption h4{
  position:absolute;
  top:50%;
  left:50%;
  padding:0;
  margin:0;
  -moz-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}
.figure a:hover .figcaption {
  background-color:transparent;
}

抱歉，忘记在悬停时隐藏文字，这是编辑后的代码笔http://codepen.io/gopal280377/pen/QjYyLL

Answer 2

在谷歌浏览器上测试过，希望对你有用

为 .figcaption 分配宽度以启用文本对齐，

将锚标记移动到代码块的父级（我的偏好）

overlay 溢出可能是由于未声明的图像尺寸，

<a href="#" class="link1">
    <div id="1" class="figure">
        <img src="http://www.w3schools.com/css/klematis.jpg" alt="flower Klematis">
        <div class="figcaption">Klematis</div>
    </div>
 </a>


.figure {
   position: relative;
   width: 10%;
   height: auto;
   background:rgba(92,104,117,0.8);
   overflow: hidden;
   }
.figcaption {
   position: absolute;
   font-size: 0.8em;
   width: 100%;
   letter-spacing: 0.1em;
   text-align: center;
   top: 50px;
   z-index: 1 !important;
   }
.figure img {
   width: 100%;
   opacity: 0.5
   }
.link1:hover img {
   opacity: 1;
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
   }
.link1:hover .figcaption {
   display: none;
   background:rgba(92,104,117,0.0);
   }