[html]
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Playfair Display|Satisfy" rel="stylesheet">

<style>
#darkre { width: 350px; height: auto; background: black; position: relative; margin: 20px auto; line-height: 120%; overflow: hidden; margin-bottom: 0px; }
#darkre picture { width: 350px; height: 200px; background-size: cover; display: block; overflow: hidden; }
#darkre lyrics1 { font-family: 'Source Code Pro', monospace; background: #222; color: white; text-transform: uppercase; position: relative; padding: 5px; top: 140px; display: block; text-align: center; -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1.2s ease-in-out 1s; -o-transition: all 1.2s ease-in-out 1s; transition: all 1.2s ease-in-out 1s; }
#darkre:hover lyrics1 { top: -50px; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -o-transition: all 0s ease-in-out 0s; transition: all 1s ease-in-out 0s;}
#darkre lyrics2 { font-family: 'Satisfy', cursive; color: #fff; line-height: 40%; text-shadow: 1px 1px 1px #222; position: relative; display: block; text-align: center; top: 140px; font-size: 25px; text-transform: lowercase; -webkit-transition: all 1.2s ease-in-out 1s; -moz-transition: all 1.2s ease-in-out 1s; -o-transition: all 1.2s ease-in-out 1s; transition: all 1.2s ease-in-out 1s; }
#darkre:hover lyrics2 { top: 250px; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s;}
#darkre tagbox { width: 350px; height: 110px; background: #222; display: block; position: absolute; top: 0px; left: 350px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; transition-delay: 1s; padding-top: 90px; text-align: center; color: white; font-family: 'Source Code Pro', monospace; text-transform: uppercase; mix-blend-mode: screen; font-size: 15px; font-style: italic; }
#darkre:hover tagbox { left: 0px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
#darkin { background: #222; padding: 30px; width: 290px; height: auto; }
#darkin text { font-size: 10px; color: #a0a0a0; text-align: justify; display: block; font-family: 'Playfair Display', serif; line-height: 170%; }
#darkin:first-letter { float: left; font-size: 30px; font-weight: 900; margin: 7px 15px; color: #ccc; font-family: 'Playfair Display', serif; }
#darkre a { color: white; }
#darkin b { color: #ccc; font-size: 11px; }
</style>
<div id="darkre">
<picture style=" background-image:url(https://placehold.it/350x200);">

   <lyrics1>My Boy My Boy My Boy</lyrics1>
   <lyrics2>Don't Love Me Like he Promised</lyrics2>
   <tagbox>

@ SOMEONE

<br>

words - Notes

</tagbox>
</picture>
<div id="darkin">
   <text>
     
POST HERE

   </text>
</div>
</div>
[/html]