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>

这段代码类似于figure/figcaption HTML5结构。以下是具体情况：https://codepen.io/anon/pen/dYaYqV

鼠标悬停时，覆盖层背景应该会隐藏（已实现），并且图像的透明度会增加到完全不透明。

问题1：使用绝对定位时，文本未居中。

问题2：示例中的覆盖层更大（在图像底部）是由于某些元素样式的设置，我认为是由于<figcaption>元素。覆盖层应该与图像大小完全一致。

问题3：在鼠标悬停时，文本和覆盖层都应该隐藏。

尽可能不要使用JS，只使用CSS。你能帮忙吗？谢谢，J。

- Jan Desta

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

抱歉，之前忘记在鼠标悬停时隐藏文本了，这里是已编辑的CodePen代码http://codepen.io/gopal280377/pen/QjYyLL

- Gopal Rajawat

---

抱歉回复晚了。这正是我所需要的。看起来很不错。谢谢。 - Jan Desta

非常欢迎 @JanDesta - Gopal Rajawat

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

- planetsarecool

---

这将为外部盒子元素创建一个整个宽度的<a>元素，并在图像下方创建一个烦人的背景条。请参见：http://codepen.io/anon/pen/MaRzyG 。无论如何，感谢您的帮助。最好的问候！ - Jan Desta