CSS Hover bug, overlay fluctuating effect on hover

Question

I am trying to place one overlay div over another so that on hover on the card div displays overlay div above it. But on hover, I don't know why there is some bug which creates a fluctuating effect before displaying the overlay div.

.overlay {
	opacity: 0;
	z-index: -2;
	height: 290px;
	width: 240px;
	background: #000;
	border-radius: 30px; 
	/*display: inline-block;*/
	position: relative;
	top: -310px;
	transition: all .4s ease;
}
.card:hover + .overlay {
	opacity: 1;
	z-index: 1;
	transition: all .4s ease;
}

	<div class="card" style="background: #fff; height: 290px; width: 240px; border-radius: 30px; display: inline-block; margin:20px; box-shadow: 0 2px 6px rgba(112,112,112,0.2);"><img src="thumb.png" height="60%;"></div>
	<div class="overlay"></div>

What am I doing wrong here?

Answer 1

That's because the z-index of the overlay increases by hovering the .card. But now you no longer hovering the .card, you are hovering the .overlay and so it disappears.
To fix this, you should add a .overlay:hover style too:

.overlay {
	opacity: 0;
	z-index: -2;
	height: 290px;
	width: 240px;
	background: #000;
	border-radius: 30px; 
	/*display: inline-block;*/
	position: relative;
	top: -310px;
	transition: all .4s ease;
}
.card:hover + .overlay, .overlay:hover {
	opacity: 1;
	z-index: 1;
	transition: all .4s ease;
}

<div class="card" style="background: #fff; height: 290px; width: 240px; border-radius: 30px; display: inline-block; margin:20px; box-shadow: 0 2px 6px rgba(112,112,112,0.2);"><img src="thumb.png" height="60%;"></div>
<div class="overlay"></div>

Answer 2

Another idea is to prevent the overlay from catching events (hover in this case) by using pointer-events: none; so that you don't lose the initial hover applied to the card:

.overlay {
  opacity: 0;
  z-index: -2;
  height: 290px;
  width: 240px;
  background: #000;
  border-radius: 30px;
  pointer-events: none;
  position: relative;
  top: -310px;
  transition: all .4s ease;
}

.card:hover+.overlay {
  opacity: 1;
  z-index: 1;
  transition: all .4s ease;
}

.card {
  background: red;
  height: 290px;
  width: 240px;
  border-radius: 30px;
  display: inline-block;
  margin: 20px;
  box-shadow: 0 2px 6px rgba(112, 112, 112, 0.2);
}

<div class="card"></div>
<div class="overlay"></div>

You can also simplify your code using pseudo element:

.card:before {
  content:"";
  position: absolute;
  opacity: 0;
  z-index: -2;
  top:20px;
  right:20px;
  left:-20px;
  bottom:-20px;
  background: #000;
  border-radius: 30px;
  pointer-events: none;
  transition: all .4s ease;
}

.card:hover::before {
  opacity: 1;
  z-index: 1;
  transition: all .4s ease;
}

.card {
  position:relative;
  background: red;
  height: 290px;
  width: 240px;
  border-radius: 30px;
  display: inline-block;
  margin: 20px;
  box-shadow: 0 2px 6px rgba(112, 112, 112, 0.2);
}

<div class="card"></div>