<link href="https://fonts.googleapis.com/css?family=Cousine|Zilla+Slab+Highlight|Merriweather|Bungee+Hairline" rel="stylesheet">
<style>
 .orel {height:400px; width: 400px; position: relative; background-image: url(https://placehold.it/400x400); background-size: 100%; border: 1px solid black;}
 .textbox {position: absolute; height: 358px; width: 358px; border: 1px solid black; background: white; left: 20px; top: 20px; opacity: 0; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out;}
 .textbox:hover {opacity: 1; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out;}
 .maintext {overflow: auto;padding: 10px; height: 300px; width: 338px; position: absolute; font-family: 'Merriweather', serif; text-align: justify; font-size: 12px;}
 .maintext h1 {text-align: center; font-size: 22px; font-family: 'Bungee Hairline', cursive; font-weight: bold; letter-spacing: 1px; margin-bottom: 0px;}
 .titlebox { position: absolute; padding: 5; background: black; height: 36px; top: 321px; width: 358px; color: white; text-align: justify; font-size: 11px; font-family: 'Cousine', monospace; line-height:; overflow: auto; z-index: 2; left:0px;}
 .title {text-align: center; font-family: 'Bungee Hairline', cursive; color: white; font-weight: bold; letter-spacing: 1px; font-size: 22px; width: 338px; position: absolute; top: 322px; padding: 10px; background: black; height: 16px; line-height: .75; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out; opacity: 1; z-index: 5}
 .title:hover {opacity: 0; transition: .7s ease-in-out; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out;-o-transition: .7s ease-in-out;}
 .creditty a {font-family: 'space mono', monospace; text-decoration: none; color: silver; font-size: 8px;}
</style>
<center>
 <div class="orel"><div class="textbox"><div class="maintext"><h1>Lyrics here</h1><hr>test test test, blah blah blah, this will scroll! <b>This is bold! <i>This is bold italic!</b> This is just italic!</i> <u>This is underlined.</u> <s>This is struck through.</s></div>
 <div class="titlebox">Tag: peeps peeps peeps | Outfit</div><div class="title">Short line of lyrics here</div></div></div><div class="creditty"><center><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></center></div></center>