JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-nav">
    <li><a href="#">Link</a></li>
</ul>
<div class="distraction-free"></div>
<div class="content">
    <p><img src="http://placehold.it/100x100" />Inhalt und Bilder und sooo</p>
</div>

CSS

.main-nav:hover + .distraction-free {
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 40px;
    width: 100%;
    z-index: 1;
}

.content { z-index: 0; }