Question

我试图从http://flink.to网站重现一些CSS，特别是每篇文章中包含图片，标题，作者，作者页面链接和链接的图块到文章。

以下是一个磁贴的HTML：

<div class="block-module">

<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
    <span class="button">View Story</span>
</a>

<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">

<div class="block-about">
    <h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
    <span class="block-stats">
    by <a href="http://flink.to/Andrew.Epstein" class="author-link">Andrew Epstein</a>
    </span>
</div>

</div>

这是一个瓷砖的CSS：

.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }

除了我们无法访问文章和观看故事之外，其他所有内容都可以。＆＃34;只有当我们将图片悬停在图片的中间/中心时才会显示的链接。

编辑：以下是演示： http://jsfiddle.net/5qwejk20/

由于网站的Flink.to的CSS表格非常复杂，我找不到如何解决这个问题。你能帮我吗？

Answer 1

有很多CSS，显然很难说出什么是什么，需要修剪它。但据我所知，这些是实现它的风格。按钮不透明度最初为0（隐藏），因此需要更改为1.

JSFiddle

我添加了这种样式，以便用光标显示

.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
    opacity: 1;
}

Answer 2

通过使用z-index属性和CSS Positioning查看元素隐藏和显示的css。尝试以下代码，我使用z-index的不同值来重叠元素。请注意，z-index属性仅对包含position:absolute，position:relative或position:fixed的元素有效，因此您必须牢记您的网站。我还在img添加了一个ID，以便在css上选择它。 http://jsfiddle.net/cfahhmkj/

HTML

<div class="block-module">
   <a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
     <span class="button">View Story</span>
   </a>

   <img class="albumImage" src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">

  <div class="block-about" >
    <h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
    <span class="block-stats">
      by <a href="http://flink.to/Andrew.Epstein" class="author-link">Andrew Epstein</a>
    </span>
  </div>

</div>

CSS

.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }

.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }

.block-about a { position:relative; z-index:5; }

.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }

.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }

.button { color:#ffffff; background-color:#337d94; }

.author-link { color:#659dae; }

.article-link {
  position:absolute;
  left:110px;
  top: 120px;
  z-index:-1;
}
.albumImage{
  position:absolute;
  z-index:0;
}
.albumImage:hover{
  z-index:-2;
}

如何只在悬停时在图片上显示按钮？

2 个答案: