The image within the element is being cropped despite having a higher z-index

On my page, I am dynamically generating a table using an API request. Each row in the table has an icon that, when hovered over by the user, displays an image associated with that item. However, I seem to have misunderstood how z-index functions, as I have set the image z-index to 99 but it still gets cut off due to the size constraints of the containing element.

/* Customizing Card Large view */
#sets-individual-page .background .card-large {
  background-color: #283046;
  border-radius: .4rem;
  display: block;
  position: relative;
  margin-bottom: 1rem;
  padding: 1rem;
  overflow: auto;
}

/* Styles for Tables */
#sets-individual-page .background .box-table {
  margin-bottom: 2rem;
}

#sets-individual-page .background .table {
  color: #fff !important;
  font-size: .8rem;
  border-spacing: 2px;
}

#sets-individual-page .background tr {
  min-height: 2rem;
}

... (more CSS styles)

/* Magic: The Gathering Card Images */
#sets-individual-page .background .large {
  position: absolute;
  display: none;
  left: 20%;
  top: 15%;
}

#sets-individual-page .background .btn-icon:hover + .large  {
  display: block;
  z-index: 999 !important;
}

#sets-individual-page .background .large-image {
  position: absolute;
  border-radius: 1rem;
  z-index: 999 !important;
  width: 18.75rem;
  height: 26.125rem;
}
...

screenshot

https://i.stack.imgur.com/NFMGt.png

EDIT:

  • included the HTML structure of the card element
  • added the relevant CSS styles for the card element
htmlcss

Answer №1

The issue with the positioning of your card image not displaying at the top of the stack and overlapping the 

<div class="card-large">
container as intended when setting it to the highest z-index value is due to the fact that the <img> elements are absolutely positioned relative to their parent .card-large. This means that the images are confined to the boundaries of that specific container.

To resolve this, you can place your .card-large container within a new parent <div> and apply a position: relative property to the new parent element. By doing so, your images will then appear above the .card-large container when the .icon images are hovered over, as expected.

/* Card Large */
.wrapper {
 position: relative;
}

.card-large {
  background-color: #283046;
  border-radius: .4rem;
  display: block;
  margin-bottom: 1rem;
  padding: 1rem;
  overflow: auto;
  color: #fff;
}

.card-large > h4 {
 color: #eee;
 font-size: 1.3em;
 margin: 0;
}

/* Tables */
#sets-individual-page .background .box-table {
  margin-bottom: 2rem;
}

.table {
  color: #fff !important;
  font-size: .8rem;
  border-spacing: 2px;
}

.table tr {
  min-height: 2rem;
}

.table th,
.table td {
  padding: .3rem .5rem .2rem .5rem !important;
  vertical-align: middle;
}

.table tr .standard > div,
.table tr .foil > div {
  display: inline;
  padding-right: .75rem;
  margin: 0;
}

#sets-individual-page .background tr .standard .btn-icon,
#sets-individual-page .background tr .foil .btn-icon,
#sets-individual-page .background tr .standard .btn-icon .icon,
#sets-individual-page .background tr .foil .btn-icon .icon {
  margin: 0 .2rem;
  text-align: center;
}

.table tr .standard input,
.table tr .foil input {
  height: 1.25rem;
  width: 2.5rem;
  margin: 0;
  text-align: right;
}

.table-hover tbody tr:hover td,
 .background .table-hover tbody tr:hover th {
  color: #f6f6f6;
  background-color: #161d31;
}

.table .icon,
.table .symbol {
  width: 1rem;
  height: 1rem;
  margin-right: .3rem;
  margin-bottom: .1rem;
}

/* MTG Card Images */
.large {
  position: absolute;
  display: none;
  left: 20%;
  top: 15%;
}

.btn-icon:hover + .large  {
  display: block;
  z-index: 999;
  
}

.large-image {
  position: absolute;
  border-radius: 1rem;
  z-index: 999;
  width: 18.75rem;
  height: 26.125rem;
}
<div class="wrapper">
  <div class="card-large">
    <h4>Cards</h4>
    <table class="table table-hover table-sm text-nowrap">
      <thead>
        <tr>
          <th scope="col" style="width: 03%;" class="text-end">
            <h5>#</h5>
          </th>
          <th scope="col" style="width: 25%;" class="">
            <h5>Name</h5>
          </th>
          <th scope="col" style="width: 15%;" class="">
            <h5>Type</h5>
          </th>
          <th scope="col" style="width: 07%;" class="">
            <h5>Rarity</h5>
          </th>
          <th scope="col" style="width: 10%;" class="">
            <h5>Mana Cost</h5>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
           <td class="text-end">1</td>
           <td class="">
            <span class="btn-icon btn-icon-primary">
              🖼️
              <img class="icon" src="/static/img/icons/image.png">
            </span>
            Chandra, Torch of Defiance
             <span class="large">
              <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/c/7/c7bbb911-9de2-455d-9677-e1004db65dbd.jpg?1593559500" height="500">
            </span>
            Chandra, Torch of Defiance
          </td>
          <td class="">Legendary Planeswalker — Chandra</td>
          <td class="">Mythic</td>
          <td class="">
            <img class="symbol" src="/static/img/symbology/2.png">
            <img class="symbol" src="/static/img/symbology/R.png">
            <img class="symbol" src="/static/img/symbology/R.png">
          </td>
        </tr>
        <tr>
          <td class="text-end">2</td>
          <td class="">
            <span class="btn-icon btn-icon-primary">
              🖼️
              <img class="icon" src="/static/img/icons/image.png">
            </span>
            <span class="large">
              <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/8/c/8c1a02f9-3ce7-46e9-8d0e-0d491bb13012.jpg?1593559582" height="500">
            </span>
            Cathartic Reunion
          </td>
          <td class="">Sorcery</td>
          <td class="">Rare</td>
          <td class="">
            <img class="symbol" src="/static/img/symbology/1.png">
            <img class="symbol" src="/static/img/symbology/R.png">
          </td>
          </td>
        </tr>
              <tr>
           <td class="text-end">3</td>
           <td class="">
            <span class="btn-icon btn-icon-primary">
              🖼️
              <img class="icon" src="/static/img/icons/image.png">
            </span>
            Chandra, Torch of Defiance
             <span class="large">
              <img class="large-image" src="https://c1.scryfall.com/file/scryfall-cards/normal/front/c/7/c7bbb911-9de2-455d-9677-e1004db65dbd.jpg?1593559500" height="500">
            </span>
            Chandra, Torch of Defiance
          </td>
          <td class="">Legendary Planeswalker — Chandra</td>
          <td class="">Mythic</td>
          <td class="">
            <img class="symbol" src="/static/img/symbology/2.png">
            <img class="symbol" src="/static/img/symbology/R.png">
            <img class="symbol" src="/static/img/symbology/R.png">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer №2

Have you considered using display: flow-root; instead of "block" in the .btn-icon:hover + .large{} selector?

The use of flow-root display can establish a new block formatting context which might allow the large images to overflow the entire table. While primarily utilized as a clearfix technique, it's uncertain if it will be effective on table elements. Nonetheless, it's worth experimenting with.

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

Finding the height of concealed content within a div using the overflow:hidden setup

I'm trying to create a div that expands when clicked to reveal its content. I've taken the following steps so far: Established a div with overflow:hidden property Developed a JavaScript function that switches between a "minimized" and "maximize ...

javascripthtmlcss

What is the best way to display the letter X (Clear) in the Chrome INPUT field with the type

A custom application was developed that utilizes an input field of the number type: <input type="number" min="-1000000" max="1000000" step="0.01"> Within Internet Explorer, there is a small "clear" or [X] button on the right side of the input field ...

javascriptjquerycssinputtextbox

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

javascriptcssreactjs

"jQuery's .each() method is only iterating through the last element in

I am encountering an issue with this function not operating correctly... only the last Element shows the box. NOTES: <aside> is set to position: fixed; and I understand that this is not the "correct" use of <article> tags, but it helps me dist ...

javascriptjqueryhtmldom

Guidelines for accessing the value of the parent function upon clicking the button within the child function?

I have a pair of buttons labeled as ok and cancel. <div class="buttons-div"> <button class='cancel'>Cancel</button> <button class='ok'>Ok</button> </div> The functions I am working wi ...

javascripthtmlcsscurrying

Issue with flexbox max-width property not being applied when resizing the page width

I'm struggling to make a flex box with max and min width properties work properly. When I reduce the page size, it ends up showing blank space instead of resizing. How can I troubleshoot this issue? .parent{ border: 1px solid red; width: 50%; ...

htmlcssflexbox

What's the reason behind jQuery's position() and offset() methods returning decimal numbers in Chrome browsers?

In my HTML document, I have a simple div tag that is absolutely positioned. In Chrome, when I set the CSS rule "right" to a fixed value in pixels and "left" to "auto", then use jQuery's position() method to determine its left position immediately afte ...

jquerycssgoogle-chrome

Trigger a jQuery click event to open a new tab

On a public view of my site, there is a specific link that can only be accessed by authenticated users. When an anonymous user clicks on this link, they are prompted to log in through a popup modal. To keep track of the clicked link, I store its ID and inc ...

javascriptjqueryhtml

How can I overlay text on top of an image?

I want to create a design where half of the text overflows and overlays the image on the right side. How can I achieve this using a Grid item? I've tried using "absolute", "relative", and "z-index" positions, but they don't seem to work in the MU ...

cssmaterial-ui

Struggling with getting Bootstrap Affix-bottom to scroll back up?

Despite reading various answers, I am still struggling to configure the settings correctly. The columns header is not resuming scrolling upwards as expected. Below is my PHP code snippet: <div id="columnsHeader" class="affix" data-offset-top="800" da ...

phpcsstwitter-bootstrapjoomlaaffix

Issues with displaying search form div using jQuery AJAX

Currently, I am in the process of developing a search form that includes a dropdown menu. The functionality involves selecting an item from the dropdown menu triggering an AJAX call to another PHP file. This call returns tags which resize both the dropdown ...

phphtmljqueryajaxforms

Choose the element that is trapped within the div

I've hit a roadblock with this issue that I just can't seem to figure out. I was working on a practice project creating a Netflix-like webpage, and the select element in the footer containing languages is stuck and won't budge. Here's m ...

htmlcss

CSS transform: applying the same CSS to multiple divs results in a variety of different outcomes

I am working on creating multiple parallelograms with the same skew aligned horizontally. While the first one looks perfect, additional divs seem to increase the skew more and more. I even attempted this using images and applying transform: rotate() but en ...

htmlcss

Scraping a p tag lacking a class attribute with the help of BeautifulSoup4 (Bs4)

I am attempting to scrape this information from a website: enter image description here Within the HTML, there is a div tag with a class. Inside that div tag, there is another div tag and then a lone p tag without a class. My objective is specifically to ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Ways to pass a message from index.html to a Vue.js 3 instance

Picture this scenario: You have a Vue index.html file that also loads a custom script: <!DOCTYPE html> <html lang="en"> <head> ... ... <script type="text/javascript"> languagePluginLoader.then(fun ...

javascripthtmlvue.jsvuexpyodide

What steps should I take to repair my jQuery button slider?

I am facing a challenge with creating a carousel of three images in HTML using jQuery. When the user clicks on the "Next" or "Previous" buttons, I want to scroll through the images one by one. However, I am struggling to hide the other images when one is d ...

javascriptjqueryhtmlcssslider

extract element from a string with the help of jquery

When using AJAX to request HTML from a page, the process involves sending a request like this: function getHTML() { //set ajax call var options = { url: '/Controller', type: 'GET', d ...

javascriptjqueryhtmlajaxtypes

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

Converting dynamic content within a div into an interactive link

I am currently working with Longtail's JW Player and facing some difficulties with a basic function. Since I am not familiar with the programming language terminologies, I will describe the issue step by step: There is a JavaScript code that displays ...

javascriptcsshtml

Dynamically adjust the image link in responsive mode to improve user experience

Is there a way to dynamically change the image links in responsive mode on WordPress? I am displaying thumbnails with a fixed size of 280*200, but I want to switch to medium-sized thumbnails (480*200) when the resolution is between 480px to 600px. Is there ...

phphtmlcsswordpressresponsive-design