JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frame">
	<div class="main">main<br>main<br>main<br>main<br></div>
	<div class="bottom">bottom<br>bottom<br>bottom<br></div>
</div>

CSS

.frame{
	position: absolute;
	top:20px;
	left:20px;
	width:100px;
}

.main{
	position: absolute;
	top:0px;
	z-index:2;
	max-width: 100%;
	background-color: red;
	width:100%;
}

.bottom{
	position:absolute;
	top:0px;
	z-index:1;
	width:100%;
}

.frame:hover .main{
	opacity:0.5;
}
.frame:hover .bottom{
	opacity:0;
}