React-modal: Modal behind hovered image

[c0debreaker]

Hi,

I'm using a basic css. I don't use any framework like bootstrap. This is the css I use when I hover over a thumbnail

.thumbnail-active:hover {
  transform: scale(1.3, 1.3);
  visibility: visible;
  opacity: 1;
  z-index: 100; // <---------
  -moz-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

Then this is my react-modal customStyles

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)',
    width                 : '70%',
    zIndex                : 200 // <--------
  }
};

You'll notice that zIndex is higher than my hover zIndex value. However, when the modal appears, it's still behind the thumbnail. See screenshot - http://i.imgur.com/kdAEhm5.jpg

[c0debreaker]

I fixed it, lol

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)',
    width                 : '70%'
  },
  overlay: {
    zIndex: 200
  }
};

[bsr203]

or with css

.ReactModal__Overlay--after-open {
  z-index: 200;
}

thanks for this qn.