text-align: center;
}
 .
#cont:hover #scroll {
opacity: 1;
 .
}
 .
 .
#overlay { /* overlay! (blue in this case) (hidden without mouseover) */
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(199, 234, 252, 0); /*copy the color of ur choice in rgb! the last digit stands for opacity*/
overflow: hidden;
width: 0;
height: 100%;
transition: background 0.5s ease;
border-radius: 9px;
 .
}
 .
#cont:hover #overlay { /* overlay when hovered! (it appears) */
width: 100%;
background: rgba(199, 234, 252, .2); /*copy the color of ur choice in rgb! the last digit stands for opacity*/
transition: background 0.5s ease-out;
}
 .
 .
</style>
 .
<div id="cont"> 
 .
 .
<img class=imgbg src="https://i.imgur.com/3zXYDZg.png">
<div id="float"> title </div>
<div id="overlay"> </div>
<div id="scroll"> your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here  </div>
</div>