element appear on hover menu with instructions! cr appreciated (@ciarispop) <3

<!-- scrollbox appear on hover effect made by dante~! cr appreciated @ciarispop pls dont repost on other pastebins tt__tt -->


<style>

#cont { /*container! i'd recommed u only change the border eheh */
width: 300px;
height: 300px;
border: 4px double black;
border-radius: 12px;
position: relative;
margin-left: auto;
margin-right: auto;
}

.imgbg { /* image made to fit no matter the size! */
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9px; /*for an image to fit make it -3px than the border-radius of the #cont*/
}

#float { /* floating text, u can change this! */
position: absolute;
width: 100%;
left: 0;
top: 100px;
text-align: center;
z-index: 1;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-style: italic;
font-family: times;
font-size:2em;
font-weight:bold;
color: #fff;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}


#scroll {
/* scrollbox! u can change this! note: mess around with the 'margin-left' depending on the width or if u change anything of the scrollbox bc it messes a bit */
opacity: 0;
position: absolute;
margin-left: 4%;
width: 250px;
top: 140px;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
height: 110px;
overflow: scroll;
background: #FFFFFF90;
transition: opacity .35s ease;
/* style of the text inside scrollbox */
font-size: 14px;
font-family: times;
color: #000;
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>