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>

我添加了标记来替换标记但是它没有像演示中那样隐藏范围;我推测它是由于我对<figcaption>标签的误解，但经过研究后我不确定。即使是他的CSS文件，我也找不到链接到中间标签的类，所以我卡住了。

Answer 1

有opacity:0，直到<figure class="effect-hera">悬停，所以如果你想要相同的效果，请保留。如果要停止Font Awesome，请删除中的所有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;
}

调用隐藏在figcaption中的css

1 个答案: