JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="str-top">строка<br>строка<br>строка</div>
    <div class="pic"></div>
    <div class="str-bottom">строка<br>строка<br>строка</div>
</div>

CSS

.wrap{
    width:200px;
    height:200px;
    position:relative;
    top:100px;
    left:100px;
}
.wrap:hover > .str-top{
    top:-40px;
}
.wrap:hover > .str-bottom{
    bottom:-40px;
}
.str-top{
    position:absolute;
    top:0px;
    left:0px;
}
.str-bottom{
    position:absolute;
    bottom:0px;
    left:0px;
}
.pic{
    width:200px;
    height:200px;
    background:#bbb;
}