JSFiddle - React, Tailwind, and code Playground
HTML
<h1>An impressive title</h1>
<div class="no-overflow">
<p>Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here.</p>
<div>
<div class="escape">Pretend this is an image :)</div>
</div>
</div>
<p>Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here.</p>
<p>Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here Lorem text here.</p>
CSS
.no-overflow{
overflow:hidden;
border: 2px solid #00f;
height: 100px;
}
.escape{
background: red;
width: 300px;
height: 200px;
position: absolute;
margin-bottom: -150px;
}
.escape:hover:after{
content: ("I'm Free.");
}