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 make div inside table same size as text inside a?

    how to add background image to css3 arrow

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How do I change the font colour of text nested within a placeholder of an input search [duplicate]

    Jquery: How to make the content showup below the navigation bar when the anchor link is clicked?

    how to increment CSS ID using PHP programmatically

    How to make JS/Jquery Css and HTML popup

    How can I have two divs inside a container such that when resizing one the other automatically resizes to fill the container?

    Show DIV message at every “X” number of minutes?

    How to load CSS into CodeIgniter

    Learning Bootstrap Thumbnails…why is that bullet showing?

    How to make text-overflow with ellipsis work with long strings that have no breaks

    How to style focused and visited anchors when scrolling with CSS / jQuery

    CSS: How to change spacing between radio button and it's text?

    How do I set the style of children using css modules in a reactjs project using classNames and JSX

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    CSS accordion menu - How to expand and hyperlink

    sidebar is under the openlayers map how to set css

    How to add a class to select_tag in Ruby on Rails

    How to align form at the center of the page in html/css

    How to create an image hover fade effect with jQuery and CSS?

    HTML and CSS: How to lay out a div tag with width:100% and left:300px

    How to achieve image changing on hover?

    How to create a CSS? [closed]

    how to apply ellipse effect in which contain space in string?

    How to get hoverover text to be at the same line-height as the triggering text

    How to make a close button for each image inside the div using CSS and js

    How to combine the two same css selector into one?

    How to hide overflow characters of a div when resizing [duplicate]

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?