Код:
<!--HTML-->
<center><link href='https://fonts.googleapis.com/css?family=Timmana' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<style type="text/css"> #honey-askme { width: 500px; height: 600px; position: relative; overflow: hidden;  }
.namesur {padding: -25px; font-family: 'Book Antiqua'; font-size: 20px;}
.namesur b {font-family: 'Book Antiqua'; font-size: 20px; text-style: bold; color: #3e0303;}

.honey-familiar { position: relative; left: 0px; top: 0px;background-color: transparent; transition-: 0.8s all ease-in-out; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; opacity: 0.0; }

#honey-askme:hover .honey-familiar { top: -600px; opacity: 1.0;  }

.honeyeden-text { font-family: 'Open Sans', sans-serif; text-align: justify; font-size: 10px; color: #888; line-height: 120%; padding: 5px; margin-top: 10px; }

.honeyeden-text b { font-family:Arial; font-size: 11px;  color: #87afb9; font-weight: 800; font-style: italic; line-height: 120%; }
.honeyeden-text1 { font-family: 'Open Sans', sans-serif; text-align: center; font-size: 12px; color: #888; line-height: 80%; padding-bottom: -25px; margin-top: 5px; }

.honeyeden-text1 b { font-family:Arial; font-size: 11px;  color: #87afb9; font-weight: 800; font-style: italic; line-height: 80%; }

.honeyeden-lyrics  { width: 270px; height: 270px; overflow: hidden; font-family: 'Old Standard TT', sans-serif; text-align: justify; font-size: 31px; text-transform: uppercase;  letter-spacing: -2px; color: #fff; line-height: 100%; text-shadow: 1px 1px 0px rgba(16, 11, 15, 1);  padding: 115px;  }
.honeyeden-tragic  { width: 478px; height: 578px; margin: 5px; padding: 5px; border: 1px solid #fff; }
.honeyeden-lonesome  { width: 458px; height: 558px; background: #fff; padding: 10px;  }

.honeyeden-mirror  {  width: 458px; height: 380px; overflow: auto; padding-right: 5px; }
</style>

<div id="honey-askme"><div style="width: 500px; height: 600px; background: url(http://placehold.it/500x600);  background-size: cover; background-position: center;">

<div class="honeyeden-lyrics"><i> цитата </i></div></div>

<div class="honey-familiar"><div class="honeyeden-tragic"><div class="honeyeden-lonesome"><div class="namesur"><i><b>N</b>ame <b>S</b>urname, <b>age</b> y.o.</i></div> 
<img src="http://placehold.it/100x100"> <img src="http://placehold.it/100x100"> <img src="http://placehold.it/100x100">
<div class="honeyeden-text1"><b>тварь/крипто/хомо</b> сапиенс</div>
<img src="http://funkyimg.com/i/2drCV.png">

<div class="honeyeden-text"><div class="honeyeden-mirror">
<table><tr><td style="width: 50%;" align="center" valign="top">
<b>  Способность</b>  
<br>развернутый ответ. помните, что у способности есть и минусы и плюсы. фантазия (вкупе с логикой) приветствуется
</td><td style="width: 50%;" align="center" valign="top">
<b>Место рождения/проживания:</b>
<br>город в котором родились/проживаете, либо петля
</td>
<td style="width: 50%;" align="center" valign="top">
<b> Ориентация</b> 
<br>ответ
<br><b> Деятельность</b> 
<br>ответ </td></tr></table>
<table><tr><td style="width: 35%;" align="center" valign="top">
<b> Особенности персонажа </b> 
<br>ответ
</td><td style="width: 35%;" align="center" valign="top"><b> Плюсы и минусы характера</b> 
<br>ответ
</td><td style="width: 30%;" align="center" valign="top">
<b> Увлечения, хобби </b> 
<br> ответ
</td></tr></table>
<font style="font-family: Tommaso; font-size: 20px; color: #73758a; text-align: center; margin-top: 5px;">Характер</font>
<br> описание характера
<br><font style="font-family: Tommaso; font-size: 20px; color: #73758a; text-align: center; margin-top: 5px;">История</font>
<br> описание биографии
</div></div></div></div></div></div></center>