JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <span class="op"></span>
    <ul>
        <li>
            <span></span>
            статья маленькая
            
            <div class="button"></div>
        </li>
        <li>
            <span></span>
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            статья большая
            <div class="button"></div>
        </li>
        <li>
            <span></span>
            статья третья средняя
            статья третья средняя
            статья третья средняя
            статья третья средняя
            статья третья средняя
            <div class="button"></div>
        </li>
    </ul>
    <div class="fon"></div>
</body>

CSS

body{
margin:0;
height:100%;
}

.op:hover~.fon{
display:block;
}

.op:hover{
z-index:2;
}

ul{
list-style:none;
width:500px;
margin:0 auto;
padding:0;
background:#ccc;
font-size:0px;
position:relative;
}

.fon{
display:none;
background:#000;
opacity:0.5;
position:absolute;
top:0px;
width:100%;
height:100%;
z-index:1;    
}

ul:hover{
z-index:2;
}

ul:hover~.fon{
display:block;

}

li{
display:inline-block;
width:30%;
padding-bottom:25px;
font-size:14px;
position:relative;
vertical-align:top;
text-align:center;
}


li span{
display:block;
margin:0 auto;
width:50px;
height:50px;
background:red;
}


.button{
position:absolute;
bottom:0;
right:5px;
width:50px;
height:20px;
background:green;
}

.op{
position:relative;    
width:100px;
height:100px;
background:red;
display:block;
}