Question

我试图在我的网站上并排显示图像，当您将鼠标悬停在它们上方时，会出现一个渐变以及一些描述项目名称的文本。我一直在尝试使用数字和figcaptions但是已经取得了很多进展，但我无法弄清楚。

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并取出了break标签

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

CSS与图中的麻烦Figcaption

1 个答案: