CSS 悬停效果，图形和图形说明叠加

Question

正在寻找一些样式 CSS 帮助。我想创建一个图像框（应该是 link），其文本居中显示在具有彩色半透明覆盖背景的图像上。我们有这样的 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结构。情况如下： https://codepen.io/anon/pen/dYaYqV

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

问题 1: 文本未以此类位置设置（绝对）居中。

问题二： 这个例子中的叠加层更大（在图像的底部）由于一些样式，我认为，元素。叠加层应与图像完全一致。

问题三： 在 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

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

CSS 悬停效果，图形和图形说明叠加

CSS hover effect with figure and figcaption overlayed

html

css

overlay

hover

figure