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

    CSS Howto..

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    Show submenu with CSS without using an unordered list

    CSS how to vertically align text within a pseudo element

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How can i override css property

    How should I keep webpages consistent [closed]

    How to change content of a div by clicking a button outside the div?

    How to add a “new line” after a ZF2 form element?

    how to change negative sign position css

    How to create a pattern overlay on top of an image

    How to set readonly property of textbox from css

    How does the resizing api on the App Engine Imagine API work?

    How do I make my div with six different pictures expand outwards when clicking it?

    How To Sync CSS Animations Across Multiple Elements?

    How to get CSS styling to shown on page? [closed]

    how to position a css sprite as background for another class

    How this switch button work by CSS?

    CSS: How to increase distance between two elements?

    How to let 3 div columns extend the height until hit the bottom of the page?

    How to implement MVC style on my PHP/SQL/HTML/CSS code?

    How to add a css class programmatically to a piece of code?

    How to change active tab to first css

    How do I display all the data in a MySQL table in a theme? [closed]

    How to apply CSS page-break to print a table with lots of rows?

    How to modify a CSS display property from JavaScript?

    How to create a horizontal scroll bar when shrinking the window

    How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?

    How to reduce this css code [duplicate]

    How to replace flex in this layout?

    how to effect td on fixed table layout