Html CSS悬停效果，图形和图形重叠

寻找一些样式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>

该代码类似于figure/figcaption HTML5结构。 情况是这样的：

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

问题1: 文本不居中于此类位置设置（绝对）

问题2: 我认为，由于元素的某些样式，本例中的覆盖更大（在图像的底部）。覆盖应该与图像一样精确

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

---

如果可能，没有JS，只有CSS。你能帮忙吗？谢谢，J.

我已经编辑了您的代码笔示例，我认为这正是您想要的 HTML:

---

抱歉，忘了在悬停时隐藏文本，这是在google chrome上测试的编辑过的代码笔，希望对你有用

将宽度指定给.figcaption以启用文本对齐

将锚定标记移动到代码块的父级（我的首选项）

覆盖溢出可能是由于未声明的图像尺寸

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

.图{
位置：相对位置；
宽度：10%；
高度：自动；
背景：rgba（92104117,0.8）；
溢出：隐藏；
}
figcaption先生{
位置：绝对位置；
字号：0.8em；
宽度：100%；
字母间距：0.1米；
文本对齐：居中；
顶部：50px；
z指数：1！重要；
}
.图img{
宽度：100%；
不透明度：0.5
}
.link1：悬停图像{
不透明度：1；
-webkit转换：.3s轻松输入输出；
转换：.3s易进易出；
}
.link1：悬停。飞行卡普顿{
显示：无；
背景：rgba（92104117,0.0）；
}

这将创建一个。无论如何，谢谢你的帮助。顺致敬意，对不起，回复晚了。这似乎正是我需要的。看起来不错。谢谢大家欢迎@JanDesta

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

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