JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block">
    
    <div id="kartinka"></div>
    <div id="fon">этот текст должен улетать вместе с темным блоком </div>
    
</div>

CSS

#block {width:300px;height:300px;border:1px dashed #000;position:relative;}
#kartinka {background:#b3b3b3;position:absolute;top:0px;left:50px;
width:200px;height:200px;z-index:1;}

#fon {background:#000;position:absolute;top:0px;left:50px;
    width:200px;height:0px;z-index:2;opacity:0.5;
-webkit-transition:height 2s;
-o-transition:height 2s;    
color:#fff;
}

JavaScript

var kartinka = document.getElementById('kartinka');

var fon = document.getElementById('fon');

kartinka.onmouseover = function() {
fon.style.height='50px'
}


kartinka.onmouseout = function() {
fon.style.height=''
}