z-index issue with GreenSock

Question

Using GreenSock TweenMax, I'm able to get the animations exactly correct, but the problem is the "flag" that flies out to the right needs to be OVER the next diamond, not under it. Setting z-index on any of the elements has no effect at all. Any ideas? A CodePen demo is here:https://codepen.io/anon/pen/xjLexJ

Here's my js:

    // FLIP THE ICON
TweenLite.set(".iconWrapper", {perspective:800});
TweenLite.set(".icon", {transformStyle:"preserve-3d"});
TweenLite.set(".back", {rotationY:-180});
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});

$(".iconWrapper").hover(
  function() {
    TweenLite.to($(this).find(".icon"), 1.2, {rotationY:180, ease:Back.easeOut});
  },
  function() {
    TweenLite.to($(this).find(".icon"), 1.2, {rotationY:0, ease:Back.easeOut});  
  }
);

// EXTEND/RETRACT THE FLAG
$(document).ready(function() {
    $(".flag").css("width", 0);
      var tl = new TimelineLite();
    $(document).on("mouseenter", ".iconWrapper", function(evt){         
         tl.to($(this).find(".flag"), 0.25, {width:"300px"});
    }).on("mouseleave", ".iconWrapper", function(evt){        
         tl.to($(".flag"), 0.25, {width:0});
    });
});

Answer 1

You need to make sure that the z-index of the element you are hovering over is higher than the other (since you've set both to 10 to start). You can do this a few ways, but here's a simple change just to show that it works:

// EXTEND/RETRACT THE FLAG
$(document).ready(function() {
  $(".flag").css("width", 0);
  var tl = new TimelineLite();
  $(document).on("mouseenter", ".iconWrapper", function(evt) {
    $(this).css('z-index', 11); // bump z-index higher
    tl.to($(this).find(".flag"), 0.25, {
      width: "300px"
    });
  }).on("mouseleave", ".iconWrapper", function(evt) {
    $(this).css('z-index', 10); // return z-index to original value
    tl.to($(".flag"), 0.25, {
      width: 0
    });
  });
});