How to display a button over a picture only when hovering it?

Tags: html,css

Problem :

I'm trying to reproduce some pieces of CSS from the http://flink.to website, especially the tiles which contains for each article the picture, the title, the author, the link to the author page and the link to the article.

Here is the HTML for one tile :

<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>

Here is the CSS for one tile :

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

Everything's OK except that we can't access the article and the "view story" link which is supposed to show up only when we hover the picture, in the middle/center of it.

Edit : Here is a demo : http://jsfiddle.net/5qwejk20/

As the website's CSS sheet of Flink.to is really very complicated, I didn't find how to resolve this. Could you please help me ?

---

Solution :

There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are the styles making it happen. The button opacity is initially 0 (hidden), so needed to change to 1.

JSFiddle

I added this style to make it show with the cursor

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