JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controller">hover me!</div>
<div class="content">box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content box content </div>

CSS

.content {
    background: yellow; color: green;
    padding: 2em 2em; margin: 0em;
    width: 11em; height: 11em;
    position: relative;
}

.controller {
    background: red;
    background: rgba(255,0,0,0.7); color: white;
    padding: 0.5em 1em;
    width: 2em; height: 3em;
    position: absolute; z-index: 10;
    top: 1em; left: 10em;
}

.controller:hover + .content {
    background: lime; color: brown;
    overflow: hidden; 
}