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

Calculation Error in JavaScript/JQuery

I've been working on a JavaScript function to calculate the sum of values entered into textboxes, but it seems to be giving me inaccurate results in certain cases. Check out the FIDDLE here Enter values : 234.32 and 32.34 Result: 266.6599999999999 ...

javascriptjqueryhtmlasp.net

Implementing conditional ng-show based on checkbox status in AngularJS

I have created this code to filter out the out-of-stock products using ng-show. When the checkbox is checked, only the available products should be displayed. HTML: <input type="checkbox" id="chkStock" value="Exclude Out of Stock" ng-model="exclude" / ...

angularjshtml

Invoke a function within the <img> tag to specify the source path

I have been attempting to achieve something similar to the following: <img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> This is my function: getIcon(status){ switch (status) { case 'Ongoing': ret ...

htmlcssangulartypescript

"Is it possible to move the text on the canvas by dragging it to where you want it to be

Seeking help again after an unsuccessful attempt. How can I allow the user to add text to the canvas by dragging it to their desired location? For example, if they input text somewhere, it should appear on the canvas and then be draggable to any position ...

javascripthtmlcanvas

Upon hitting submit, the form remains unresponsive

I have been developing a permissions system for my NodeJS project (Using the SailsJS MVC) and encountered an issue. After resolving my initial error as detailed here, I am now facing a problem where the form is unresponsive. It neither shows an error in th ...

javascripthtmlangularjsnode.jssails.js

How can I effectively search a text file in PHP and display all the results on a webpage?

I've been experimenting with building a webpage that allows users to search through a .txt file using only html and php. Below is the code I have come up with: <?php $file = 'myfile.txt'; if (preg_match_all($pattern, $contents, $matches ...

phphtml

Tips for confirming a date format within an Angular application

Recently, I've been diving into the world of Angular Validations to ensure pattern matching and field requirements are met in my projects. Despite finding numerous resources online on how to implement this feature, I've encountered some challenge ...

javascripthtmlangulartypescript

Modifying an image's height and width attributes with jQuery and CSS on click action

I'm currently developing a basic gallery using HTML, CSS, and jQuery. The objective is to have a larger version of an image display in a frame with an overlay when the user clicks on it. While this works flawlessly for horizontally-oriented images, ve ...

javascriptjquerycssoverlay

What is the best way to create a stylish vertical line separating two divs stacked vertically?

I am trying to connect two divs that are positioned vertically with a clean and elegant vertical line. Although I attempted using the pipe (|) font, it did not produce the desired result. Can anyone provide guidance on how to create a more aesthetically pl ...

htmlcss

Is your MJML column layout not stacking properly on mobile devices?

I've been struggling with a basic 2-column design created using the online editor at mjml.io. I can't seem to get it to stack on mobile devices. The email looks identical on desktop (Outlook 365 for PC) and mobile (Outlook for iOS on iPhone 13) ...

htmloutlookresponsive-designhtml-emailmjml

Mastering the alignment of Material-UI Menu items

When using the menu and menu item components of material-ui to create a select dropdown menu, I encountered an unusual issue where the dropdown menu always expands to the left side of the box, as shown in the image below: https://i.stack.imgur.com/ykRrp.jp ...

javascriptcssreactjsmaterial-ui

Issue with ChartJs version 2.8.0: The custom tooltip remains visible even when clicking outside the chart canvas or moving the mouse pointer

I am utilizing ChartJs to display a line chart with a custom tooltip that appears upon the click event of the data points. The challenge I am facing is that the custom tooltip remains visible even when the mouse pointer is outside the chart canvas area. ...

javascripthtmlcsschartschart.js

In Internet Explorer 7, the combination of having a hasLayout property along with setting the position to relative,

Issue: Encountering a challenge in IE7 with a div containing a gradient and a flyout menu on hover. Although it may seem simple, applying position:relative to the container for accurate menu positioning conflicts with the filter/hasLayout combination. Ch ...

cssinternet-explorer-7

Differences Between Vuetify Breakpoints and CSS Helper Classes

As I browse through the Vuetify documentation and various code snippets on the web, I often come across examples that mention using either a Vuetify breakpoint or a CSS helper class to make an element responsive to screen size changes. Is there a preferre ...

javascripthtmlcssvue.jsvuetify.js

Is there a way to modify the color of ASCII art letters within HTML's <pre> tags?

For this illustration, I aim to transform the letter "y" into a shade of blue. ,ggggggggggggggg dP""""""88""""""" Yb,_ 88 `"" 88 88 88 gg gg 88 I8 8I gg, 88 ...

htmlcssasciiascii-art

Retrieving user data from a client-side button using Node.js

I am currently in the process of developing a blog platform where users can create their own blogs and explore content from others. On a specific page, users can view a list of available blogs and access each one individually. To display this list, I am ut ...

htmlnode.jsmongooseejs

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

Creating a dynamic list structure using <ul> and <li> tags in a CSHTML ASP file

I am aiming to design a visually appealing structure using ul li for categories. Each line of the structure should consist of three elements: <li> <ul class='kwicks kwicks-horizontal'> <li></li><li></l ...

htmlasp.net

Discover HTML tags

I am currently working on a solution to identify and retrieve the first HTML tag from a given string of HTML. If no tag is found, I aim to return null as the output. An example of a tag would be something like <b>. After exploring various methods wi ...

javahtmlstring

Gaining a comprehensive understanding of media queries

Hello everyone, I need some help with media queries. I've been working on a website that is already responsive. However, I am required to write the code in a child theme rather than directly in the original files. When I attempt to add new media quer ...

htmlcssmedia-queries