Ways to show a button on top of an image only when it is being hovered over

I've been inspired by the CSS styles on the website, specifically the tiles that showcase the picture, title, author, link to the author's page, and link to the article for each post.

Below is the HTML structure for a single 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>

And here is the corresponding CSS style for the 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 seems to be working fine except for the hover effect on the image to reveal the article access and the "view story" link in the center. Here is a demo of the issue: http://jsfiddle.net/5qwejk20/

The CSS sheet on Flink.to's website is quite complex, so I'm having trouble figuring out how to fix this. Any help would be greatly appreciated!

htmlcss

Answer №1

Sorting through the extensive CSS code can be a challenging task, but it seems like these specific styles are responsible for the desired effect. Initially, the button's opacity is set to 0, making it hidden until adjusted to 1.

Check out this JSFiddle

To make the button visible on hover, I introduced the following style:

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

Answer №2

Upon inspecting the CSS, it appears that elements are being hidden and shown using the z-index property along with CSS Positioning. To experiment with this concept, you can try adjusting the values of z-index to create overlapping elements. Keep in mind that the z-index property is only effective for elements with position:absolute, position:relative, or position:fixed, so structure your website accordingly. Additionally, an id has been added to the img for easier selection in the CSS. You can view the code snippet here: 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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display my search box when the button is activated

I have a button labeled "Search" that I want to click in order for my search field (which is currently hidden with display:none) to become visible. However, my current setup is not working as intended. I have created a jsfiddle to illustrate my issue. Al ...

htmlcssmodx

What is causing justify-content to not function properly in React?

Struggling to center two divs within a container using flexbox. Flex-wrap and align-items are working fine, but justify-content just won't cooperate. :( <div className="container"> <div className="card- ...

cssreactjs

Leverage the power of JSON values by incorporating them directly into HTML tags

My JSON file is generating the following styles: { "h1" : { "font-family" : "Lato", "font-size" : "24px", "line-height" : "28px", "font-weight" : 600, "colorId" : 3, "margin-bottom" : "10px", "margin-top" : "20px" }, "h2" : { ...

htmljsonparsingvue.js

Tips for incorporating basic code into an android app

I find myself puzzled about the placement of regular Java code in an Android application. Using the Eclipse SDK, when you create an application, it automatically generates a .java file with an OnCreate() method. Should I insert my code within this method? ...

javaandroidhtmloncreate

The jQuery navigation consistently unveils the initial option every time

My navigation element looks like this: <ul> <li name='first_item'> <ul> <li>item 1</li> <ul> <li>item 1.1</li> <li ...

javascriptjqueryhtmlmouseeventmouseenter

Can you explain the attributes "lsdata" and "lsevents" to me?

Just starting out with selenium here. I'm working on automating form filling using selenium and I'm struggling to click a button with the following tag. <a class="urLink urT" id="mq120h" ct="LN" lsdata="{0:'Move\x20Left',1:&apo ...

htmlseleniumwebautomation

Employ gulp for rebasing CSS URLs

I have a question regarding how to resolve the following issue: In my sass files, I utilize absolute path variables in my main include files. For example, fonts are stored in /assets/fonts/... and icons are located in /assets/icons/... These paths only wo ...

csssassnpmgulp

How can XPath be used to target a specific parent element?

After reviewing the material, I am led to believe that it may not be feasible; however, I will present the following scenario just in case: Consider the following oversimplified HTML structure (derived from a CMS-generated HTML, hence limited control) < ...

htmlxmlxpathcypress

Tips for aligning a Material UI FAB button in the center and keeping it in the center while resizing the window

Is there a way to center a MaterialUI FAB button and keep it centered while resizing the window? The current positioning is not centered, as seen in the screenshot below, and it does not adjust with window size changes. Below is the code for the current F ...

cssreactjsmaterial-ui

I require fixed headers that no longer stick once reaching a specific point

I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...

javascripthtmlcss

Basic AJAX request not functioning properly

I am encountering an issue with a very simple AJAX call on my localhost. I am using a Windows 10 Machine with XAMPP running. I have checked the packages, and it seems that the AJAX request is not being sent to handle.php. Can someone help me figure out wha ...

phpjqueryhtmlajax

Internet Explorer 11 has a problem with excessive shrinking of flex items

I have a flexbox setup with a left and right section, each of equal width. The left side displays an image and the right side contains text. While this layout works fine in Google Chrome, it does not wrap properly in Internet Explorer 11 when the width is ...

htmlcssgoogle-chromeflexboxinternet-explorer-11

Issue with CSS File not being recognized by React Component

After using the webpack create-react-app with npx, I encountered an issue with my component styling. Despite having a CSS file named header.css in the src directory alongside Header.js, my component does not seem to be styled correctly. Here is how my comp ...

cssreactjs

Is foreach the key to optimizing your queries?

At first, I created three separate queries ($rs1, $rs2, $rs3) for the IFs to check if any images are assigned to the specified product in the database. The challenge now is optimizing this process by consolidating it into a single query and using a foreac ...

phphtmlmysql

Connect an EventListener in JavaScript to update the currentTime of an HTML5 media element

*update I have made some changes to my code and it is now working. Here's the link: I am trying to pass a JavaScript variable to an HTML link... You can find my original question here: HTML5 video get currentTime not working with media events javscr ...

javascripthtmlvideoevent-listener

Error Encountered on Android Due to Sec-WebSocket-Key Mismatch

I'm facing an issue with my WebSocket implementation using PHP. It seems to work fine on my desktop computer, but when I try to access my website on an Android device, the server implementation throws an error during the handshake process. It shows ...

phpandroidhtmlwebsocket

Efficiently rearranging elements by adjusting their top values techniques

My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...

javascripthtmlcsspositioning

What is the best way to toggle a div and dynamically load content into it while it's open?

I am looking to create a toggle effect where a div opens, loads a page within it, and then can be closed again. My goal is to achieve this functionality with multiple links on the page. <div id="main-nav"> <div id="menu-container"&g ...

javascriptjqueryhtmlcss

The CSS classes for the dropzonejs are not being properly updated for editing purposes

I'm currently facing an issue where I am attempting to include an editable area inside a dropzone, but for some reason, the editable area is not visible within the dropzone and the CSS classes are not being applied. <a href="#" editable-text="us ...

javascriptcssangularjsdropzone.js

Issue with calling a function to change the CSS color class of a button in Angular

Within my Angular code, I am attempting to set a CSS color for my button by calling a TypeScript function that will return the appropriate CSS class name. This is the code I have tried: <button style="height: 10%" class="getColor(days.date)">{{days ...

cssangulartypescript