JSFiddle - React, Tailwind, and code Playground
HTML
<div class="relative">
<div class="overflow">
box with "overflow:hidden;" (HOVER ME)
<div class="absolute">
absolute box which ignore "overflow:hidden;" rule of parent box
</div>
</div>
</div>
CSS
.relative{
position:relative;
}
.overflow{
width:300px;
height:20px;
background:#ff0;
overflow:hidden;
}
.overflow:hover .absolute{
display:block;
}
.absolute{
width:200px;
height:60px;
background:#f00;
position:absolute;
top:20px;
left:30px;
display:none;
}