main scroll nako.ju.mp

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali&display=swap" rel="stylesheet">

<style>

@font-face {
font-family: lovely;
src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
}

#cont { /*container! i'd recommed u only change the border eheh */
width: 240px;
height: 240px;
border-radius: 12px;
border: 4px double black;
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: 40px;
text-align: center;
z-index: 1;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: lovely;
font-size:3em;
font-weight:bold;
color: #fff;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

mark { /* round stuff like highlight */
background: #d4e3c8;
border-radius:7px;
border: 1px solid #000;
padding-left: 5px;
padding-right: 5px;
color: ##41572e;

}

@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%;
margin-right: 4%;
width: 200px;
top: 100px;
border-radius: 10px;
bordeR: solid 1px black;
padding: 10px;
height: 100px;
overflow: scroll;
background: #FFFFFF90;
transition: opacity .35s ease;
/* style of the text inside scrollbox */
font-size: 14px;
font-family: 'Mali', cursive;
color: #000;
text-align: center;
line-height: 16px;
}

#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;
}

#hov {
font-family: lovely;
font-size: 23px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-weight: bold;
}

a:hover {color: #add6dd;}
    a { color: #5d95a0; text-decoration: none;}

</style>

<div id="cont">

<img class=imgbg src="https://i.imgur.com/D6yrVz0.jpeg">
<div id="float"> dani </div>
<div id="overlay"> </div>
<div id="scroll"> your text goes <strong>here</strong> your text goes here your text goes here your text goes here your text goes here your text goes <br></br> here your text goes here your text goes here your text goes here <br></br>

<div id="hov"><a href="#i">rULES</a> <a href="#ii"> INTERESTS</a> <a href="#iii">MOrE</a> </div>
</div>
<br></br>