CSS: DIVs overlaping, z-index doesn't fix

Question

This is my html:

<div id="body">
  <div id="body-inner">
    <div class="game" id="csgo" onclick="window.location='https://csgo.fraid.gg/'"><div class="game-handle"></div></div>
    <div class="game" id="minecraft" onclick="window.location='https://mc.fraid.gg/'"><div class="game-handle"></div></div>
    <div class="game" id="lineage" onclick="window.location='https://l2.fraid.gg/'"><div class="game-handle"></div></div>
  </div>
</div>

This is my css:

.game {
  width: 807px;
  height: 607px;
  filter: drop-shadow(10px 10px 32px black) opacity(50%) grayscale(80%);
  margin: auto;
  margin-left: -220px;
  margin-right: -220px;
  transform: scale(0.7,0.7);
  transition: 150ms ease-in-out;
  position: relative;
  z-index: 99;
}
.game#csgo {
  background: url('game-csgo.png') no-repeat rgba(0,255,0,0.5);
  background-size: 100%;
}
.game#minecraft {
  background: url('game-minecraft.png') no-repeat rgba(0,255,0,0.5);
  background-size: 100%;
}
.game#lineage {
  background: url('game-l2.png') no-repeat rgba(0,255,0,0.5);
  background-size: 100%;
}
.game.hover {
  filter: drop-shadow(20px 20px 64px black) opacity(100%) grayscale(0%);
  transform: scale(1,1);
  transition: 150ms ease-in-out;
}
.game-handle {
  width: 411px;
  height: 525px;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  left: 198px;
  z-index: 99999;
  background: rgba(255,0,0,1);
}

jQuery script to toggle .hover class:

jQuery(function() {
  jQuery('.game-handle').mouseenter(function() {
    jQuery(this).parent('.game').addClass('hover',0);
  }).mouseleave(function() {
    jQuery(this).parent('.game').removeClass('hover',0);
  });
});

And the thing is that the RED parts are the things that I want to register mouseover events with. But the divs next to the previous ones, going from left-to-right, overlap the RED areas too! :( The GREEN parts are the divs holding the backgrounds itself. Any idea how to bring all the RED divs into the absolute front?

(The only reason why I do this this way is because the custommer wants to have "cards" that have thing hanging from them like the sword,gun,arm and stuff, and then the main div has to be bigger in width and have negative margin from both sides)

Screen:

Fiddle example: https://jsfiddle.net/9yy2csvd/

The Problem:

cursor is on the red part but the green from div on the right overlaps it (no mouseenter event triggered). So you have to go more to the left with cursor so you only touch the red part (and trigger the event). But I need it that the red part is on top of all the green,

Each background of divs with class .game look like this:

I need that only when I move the mouse cursor over the "card" itself, not the transparent background around it (including parts of the picture that are sticking out of the "card"), the event is triggered.

Answer 1

This is complicated.

When z-index typically works?

z-index works inside a scope of closest parent with z-index. In other words, you can never have child higher then other parents when if this child's parent has set z-index.

The chase

From my personal tests I concluded that you indeed can achieve desired effect, as long as you will not use any of the following:

1. Any z-index for parent
2. Any transform for parent
3. Any filter for parent

Turns out every property from the list above will break the result.

Example

There're many variables for when z-index works or doesn't work as you'd expect. I prepared a test environment for you to try out. Notice when it breaks and what property you can apply to fix it.

$(function() {
  $('body').addClass('child-relative'); // Simplest combination when it works
  
  $('label input').click(function() {
    var className = $(this).data('class');
    $('body').toggleClass(className);
  }).each(function() {
    var className = $(this).data('class');
    $(this).attr({
      checked: $('body').hasClass(className)
    });
  });
});

/*/ "Works" = .child is above all .parent-s /*/

/*/ Basic styles /*/
.parent {
  outline: 2px dotted blue;
  background: rgba(0, 0, 255, .2);
  width: 200px;
  height: 200px;
  float: left;
  
  margin-right: -50px;
}

.child {
  background: yellow;
  outline: 2px dashed red;
  width: 150px;
  height: 150px;
  margin: 25px;
}

/*/ Variables /*/
.parent-relative .parent {
  /* Works when .child has position: relative/absolute; AND z-index > 0 */
  position: relative;
}

.parent-z-index .parent {
  /* Never works */
  z-index: 0;
}

.parent-transform .parent {
  /* Never works */
  transform: scale(1);
}

.parent-transform-rotate .parent {
  /* Never works */
  transform: rotate(360deg);
}

.parent-filter .parent {
  /* Never works */
  filter: opacity(100%);
}

.child-relative .child {
  /* Works when .parent has only position: static; OR when .child has z-index as well */
  position: relative;
}

.child-z-index .child {
  /* Works when .parent has position: static; OR position: relative; WITHOUT z-index */
  z-index: 1;
}

.child-transform .child {
  /* Doesn't matter */
  transform: scale(1);
}

.child-transform-rotate .child {
  /* Doesn't matter */
  transform: rotate(360deg);
}

.child-filter .child {
  /* Doesn't matter */
  filter: opacity(100%);
}

/*/ Ignore following code /*/
h2 {
  margin-bottom: 0;
}
.parent {
  margin-top: 20px;
}
.controls .bad {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h2><code>.parent { }</code></h2>
<div class="controls">
  <label>
    <input type="checkbox" data-class="parent-relative">
    <code>position: relative;</code>
  </label>
  <label class="bad">
    <input type="checkbox" data-class="parent-z-index">
    <code>z-index: 0;</code>
  </label>
</div>
<div class="controls">
  <label class="bad">
    <input type="checkbox" data-class="parent-transform">
    <code>transform: scale(1);</code>
  </label>
  <label class="bad">
    <input type="checkbox" data-class="parent-transform-rotate">
    <code>rotate: scale(360deg);</code>
  </label>
  <label class="bad">
    <input type="checkbox" data-class="parent-filter">
    <code>filter: opacity(100%);</code>
  </label>
</div>
<h2><code>.child { }</code></h2>
<div class="controls">
  <label>
    <input type="checkbox" data-class="child-relative">
    <code>position: relative;</code>
  </label>
  <label>
    <input type="checkbox" data-class="child-z-index">
    <code>z-index: 1;</code>
  </label>
</div>
<div class="controls">
  <label>
    <input type="checkbox" data-class="child-transform">
    <code>transform: scale(1);</code>
  </label>
  <label>
    <input type="checkbox" data-class="child-transform-rotate">
    <code>rotate: scale(360deg);</code>
  </label>
  <label>
    <input type="checkbox" data-class="child-filter">
    <code>filter: opacity(100%);</code>
  </label>
</div>

<div class="parent">
  <div class="child">
    Child 1
  </div>
</div>
<div class="parent">
  <div class="child">
    Child 2
  </div>
</div>
<div class="parent">
  <div class="child">
    Child 3
  </div>
</div>

Keep in mind that I have tested this only in Chrome on Windows. Perhaps in other environments properties marked as .bad will work without issue. I'll leave detailed tests for you to perform! ;-)

Have a nice day!
~Wiktor