JSFiddle - React, Tailwind, and code Playground

by LinkinTED

HTML

<div id="sell1">
    <div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
    <div class="s2"></div>
</div>

CSS

#sell1 {
    height:100px;
    width:100%;
    background-color: rgb(50,70,130);
}
#sell2 {
    height:100px;
    width:100%;
    background-color: rgb(50,70,130);
}
#gap {
    height:50px;
    background-color:white;
}
.s1, .s2 { 	width:100%;
height:247px;
position:absolute;
		background:rgba(255, 255, 255, 0.6);
		opacity:0;
		-webkit-transition: opacity .25s ease;
		-moz-transition: opacity .25s ease;
		}
#sell1:hover ~ #sell2 .s2 {
    opacity:1;
}