覆盖了图和图标题的CSS悬停效果

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结构。情况如下：https://codepen.io/anon/pen/dYaYqV

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

问题1:文本不以这种位置设置为中心（绝对）。

问题2:这个例子中的覆盖层更大（在图像的底部），我认为这是由于元素的一些样式。覆盖应该与图像完全一样。

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

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

Answer 1

我已经编辑了您的代码笔示例，我认为这正是您想要的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

在谷歌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);
   }