Creating functional links with card-img-overlay in Bootstrap v4

Encountering an issue where Bootstrap v4 cards utilizing card-img-overlay to overlay text on an image are causing links below the image to become unresponsive.

The following links are functional:

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

The following links are NOT functional:

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-img-overlay card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

An open issue exists for this problem in Bootstrap v4, but does anyone have a workaround solution that maintains the same appearance?

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Answer №1

The overlay in this scenario is set to have an absolute position, which assigns a specific z-index value to that element. On the other hand, all other content within the card is positioned statically, meaning they do not have any assigned z-index values. To ensure that the link within the card has a z-index, you can change its position property to something other than static. As the card link appears after the overlay in the HTML structure, the stacking order will automatically place the card link above the overlay.

.card-link {
  position: relative;
}

Answer №2

In a helpful tip from Michael Coker, he suggests incorporating the following code snippet into your css to solve the problem at hand.

.card-link {
  position: relative;
}

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

What is the method for adding a tag within a specific div ID in ExtJS?

I am looking to insert a new tag within existing tags using extjs, based on the div id 'task123', and also trigger an alert message accordingly. Below is the HTML code snippet: <div id="task123"> <div class="msg" id="sample"> ...

javascriptjquerycsshtmlextjs

Ensure that the corner ribbon remains in place on the pricing table by making

Looking to enhance the functionality of a price table that features a corner ribbon? Currently, there is a hover effect on the price table that displaces the corner ribbon. Check out the code snippet below. The goal is to keep the corner ribbon sticky when ...

htmlcssbootstrap-4

CSS fails to function properly on websites hosted on nginx servers

During the process of creating a static website, I utilized VS Code and Live Server on my Windows machine. The site appeared to function properly. However, upon transferring the files to my CentOS machine to run the site through nginx, the site loaded cor ...

htmlcssnginxwebstatic

Tips for identifying text within HTML code

Looking for help with this HTML code: <span class="navbar-text navbar-nav company-title">aLine</span> The text "aLine" is displayed on the navigation bar. Can you guide me on how to locate this text using xpath? ...

javascripthtmlseleniumselenium-webdriverwebdriver

Mastering the Art of jQuery and Line Breaks

I've been working on a project where I am struggling to figure out how to proceed. The issue is with a textarea element where the user should input text, and that input should be displayed directly in a span. Currently, when the user presses enter, th ...

jqueryhtml

Toggle the visibility of table TDs by clicking on a specific TD cell

I came across a solution that perfectly addressed my issue, but I'm struggling to implement it in my code correctly. I managed to get it to work initially, but then everything suddenly stopped functioning... Show or hide table row if user clicks on i ...

jqueryhtmlhideshow

What is the best way to implement a background image using Tailwind in Next.js?

I am facing an issue with displaying a background image in my project. The image is stored in the public folder and named bg.png. In the index.js file located in the pages folder, I have attempted to set this image as a background but it seems to not be ...

cssnext.jsjsxbackground-imagetailwind-css

Validate whether the datepicker HTML element contains a value before running a jQuery function

I have implemented a jquery datepicker in my form to select dates. In this setup, I am using jquery to check if the selected date is empty and also to verify if it falls on a Sunday. To address the issue of checking if the date is empty, I have utilized t ...

javascriptphpjqueryhtmldatepicker

Struggling to achieve full height for div content between header and footer using Bootstrap 4?

This post may seem similar to others, but it's not. Please read carefully. I am looking to make the main container (<main role="main" class="container">) full-height between the header and footer using Bootstrap 4. Here is my HTML code: // I ...

htmlcsstwitter-bootstrapbootstrap-4

Create dynamic text on an HTML canvas starting from the center, displaying one character at a time while constantly adapting to the formatting

I am currently in the process of developing a website that has the capability to animate text, drawing each character onto a canvas one by one. I have successfully completed the initial coding for this functionality. However, my next challenge involves cen ...

javascripthtmlfunctioncanvassetinterval

Leverage React.js by incorporating a Header-Imported JavaScript Library

I recently developed a React.js web application and am exploring the use of Amplitude Analytics, which provides a Javascript SDK found here. According to the guidelines, I need to include a <script></script> within the <head></head> ...

javascripthtmlreactjsnpmamplitude-analytics

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

I am looking to reference all anchor tags on the page that have a parent h2 tag. To achieve this, I need to iterate through each anchor tag that has a parent h2 and add an attribute using jQuery. <body> <h1>not me</h1> <a href ...

javascriptjqueryhtmlcss

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

return <div> <div >{'Audios'}</div> {urls.map(url => <div > <audio controls src={url} ref={(element) => this.audioRefs.push(element)} /> </div>)} </div>; I a ...

javascripthtmlreactjsfrontend

Using JavaScript to we can transfer the function result to an HTML input field

Is there a way to display the result of a JavaScript function in an HTML input field? Here is an example form: https://i.sstatic.net/HHHl2.png When I click "Run - Script," the following simple script is executed: <button type="submit" class="btn btn ...

javascripthtmlbootstrap-4

Encountering issues loading background image with Reactjs and Webpack

I've encountered an issue while trying to load a background image in my React project from a custom CSS file. I am currently using Webpack 4. .bgimage { height: 100vh; background: url('../images/header.jpg'); } Unfortunately, the image ...

cssreactjswebpack

Using VBA to Populate Dropdown List on Webpage from an iFrame

I am facing an issue with my code that aims to interact with a webpage by clicking on a link and then modifying dropdown lists within an Iframe. Specifically, I am attempting to populate the Manufr dropdown list based on data from the Year iFrame using VBA ...

javascripthtmlvbaexcel

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

IE 8 behaves in varying ways depending on the computer it is used on

Why might IE 8 behave differently on two separate machines? Specifically, when visiting this site: One machine experiences the issue of the "X" disappearing and not being able to minimize a slideshow after maximizing it. However, on another machine, even ...

jquerycsshtmlinternet-explorer-8

What is the best way to position a container div over another container using Bootstrap or CSS?

https://i.sstatic.net/q1qGi.png I'm working on a Bootstrap 4 layout where container B needs to overlay part of container A. I want to achieve a design where container B appears on top of container A. Any suggestions or references on how to achieve th ...

javascripthtmlcssbootstrap-4

Align the outer margin to auto without aligning the justify content center outer

Unable to center outer div when using justify-content:flex-start and margin 0 auto Attempted to align content starting from the left in each row with justify-content:flex-start for items and the outer div horizontally centered to position the container in ...

htmlbootstrap-5