css - 调用隐藏在 figcaption 中的 css

Question

我目前正在使用特色“hera”设计 here然而，原始代码大概使用了 Font Awesome , 我想用我自己的文字或可能的图像替换这些图标。我正在使用的代码如下:

<div class="grid">
  <figure class="effect-hera">
    <img src="img/17.jpg" alt="img17" />
    <figcaption>
      <h2>Tittle <span>Tittle two</span></h2>
      <p>
        <a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
        <a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
        <a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
        <a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
      </p>
    </figcaption>
  </figure>
</div>

我添加了一个 <p>标签替换 <i>标记但是它并没有像演示中那样隐藏跨度；我推测是因为我对 <figcaption> 的误解标记但是经过研究我不确定。即使在他的 CSS 文件中我也找不到链接到中间的类 <i>标签所以我卡住了。

Answer 1

<i>有 opacity:0直到 <figure class="effect-hera">悬停在上面，所以如果您想要相同的效果，请保留 <i>的。如果您想停止 Font Awesome，请删除 <i> 中的所有 CSS 类的，并为您自己的图像/字体使用不同的类。我做了一个jsFiddle我的工作代码也在下面:

<div class="grid">
  <figure class="effect-hera">
    <img src="img/17.jpg" alt="img17" />
    <figcaption>
      <h2>Tittle <span>Tittle two</span></h2>
      <p>
        <a href="#"><i class="fa-fw"></i></a>
        <a href="#"><i class="fa-fw"></i></a>
        <a href="#"><i class="fa-fw"></i></a>
        <a href="#"><i class="fa-fw"></i></a>
      </p>
    </figcaption>
  </figure>
</div>

CSS:

.fa-fw {
background:url(http://maps.google.com/mapfiles/kml/pal3/icon55.png) no-repeat left top;
width:32px;
height:32px;
display:inline-block;
background-size:100%;
float:left;
}

.grid {
width:64px;
display:block;
}