CSS Hover bug, overlay fluctuating effect on hover
up vote
3
down vote
favorite
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%;&q