图和图标题的 CSS 问题

Question

我正在尝试在我的网站上并排显示图像，当您将鼠标悬停在图像上时，会出现一个渐变以及一些描述项目名称的文本。我一直在尝试通过使用数字和无花果标题来实现这一点，但取得了很大进展，但我无法弄清楚一些事情。

1) 如何使标题仅显示在图像上（现在它显示在图像上，但是没有 CSS 的文本会有一个空白区域）

2）如何并排对齐图像，现在它们显示不均匀。

3) 如何让标题文字只在悬停时出现

我的网站在这里，数字在页面底部：http://example4.inivex.com

这是我的 CSS：

.test a {
position: relative;
display: inline-block;
border: 1px solid;
/*float:left;*/
width:300px;
height:240px;
margin:5px;
}

.test a:hover:before {
content: '';
display: block;
border: 0px solid;
background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png);
width: 300px;
height: 240px;
position: absolute;
top: 0;
right: 0;
}

figure {
float:left;
width:300px;
height:240px;
margin:5px;
}

.test figcaption {
position: relative;
top: -30px;
left: 15px;
}

这是我在页面上的 HTML：

<h3 style= "text-align: center;">Our Work</h3>
<br><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img         src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300"     height="240" /></a><figcaption>Test Caption</figcaption></figure><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br>

Answer 1

给你...

Codepen Demo

HTML

作为您的帖子，除了我添加了一个包装器 div 并取出了中断标签

CSS

.wrapper {
  text-align:center;
}

figure {
  display: inline-block;
  border:1px solid grey;
  position: relative;
  overflow:hidden;
}

figure a {
  display: block;
}

figure:hover:before {
  content: '';
  display: block;
  background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

figcaption {
  position: absolute;
  height:50px;
  line-height:50px;
  background-color: grey;
  bottom:-50px;
  width:100%;
  transition: bottom 0.5s ease;
}

figure:hover figcaption {
  bottom:0;
}