<!--HTML-->
<center>
<style type="text/css">
#jennyb{overflow: hidden; position: relative; width: 500px; height: 600px; border: 20px solid #bfd3d6;}
#jennyb. brat{-WEBKIT-TRANSITION: 1S ALL EASE-IN-OUT; -MOZ-TRANSITION: 1S ALL EASE-IN-OUT; O-TRANSITION: 1S ALL EASE-IN-OUT; position: absolute; right: 400px; width: 500px; height: 600px; background-color: #E3CAA1; }
#jennyb:hover .brat{-WEBKIT-TRANSITION: 1S ALL EASE-IN-OUT; -MOZ-TRANSITION: 1S ALL EASE-IN-OUT; O-TRANSITION: 1S ALL EASE-IN-OUT; top: 0px;}
#jennyb .sbrat{ -WEBKIT-TRANSITION: 1S ALL EASE-IN-OUT; -MOZ-TRANSITION: 1S ALL EASE-IN-OUT; O-TRANSITION: 1S ALL EASE-IN-OUT; position: absolute;  width: 500px; height: 600px; background-image: url(http://funkyimg.com/i/29unA.jpg); }
#jennyb:hover .sbrat{-WEBKIT-TRANSITION: 1S ALL EASE-IN-OUT; -MOZ-TRANSITION: 1S ALL EASE-IN-OUT; O-TRANSITION: 1S ALL EASE-IN-OUT; bottom: -600px;}
.charbarNAME { width: 385px; height: 30px; font-family: fjalla one; font-size: 25px; line-height: 32px; color: #fff; text-align: center; background-color: #ddc971; opacity: 0.7; }
.charbarNAME:hover { width: 385px; height: 30px; font-family: fjalla one; font-size: 25px; line-height: 32px; color: #fff; text-align: center; background-color: #bfd3d6; opacity: 1; -moz-transition-duration: 1s;  -webkit-transition-duration: 1s;  -o-transition-duration: 1s; }
.text { width:220px; height:20px; padding-left:5px; padding-bottom:5px; border-bottom:1px solid #eee; margin-bottom:5px; font-family: fjalla one; color:#222; background-color: #bfd3d6;  line-height:30px; font-size:12px; text-align:center; border: 5px solid #bfd3d6;}
.text:hover { width:220px; height:20px; padding-left:5px; padding-bottom:5px; border-bottom:1px solid #eee; margin-bottom:5px; font-family: fjalla one; color: #fff; background-color: #ddc971;  line-height:30px; font-size:12px; text-align:center; border: 5px solid #bfd3d6; opacity: 1; -moz-transition-duration: 1s;  -webkit-transition-duration: 1s;  -o-transition-duration: 1s;  }
.head { color: #568ba9; text-shadow: 2px 2px 0px #f7d25d; font-family: raleway; font-weight: 900; text-transform: uppercase; font-size: 15px; padding: 5px; border-bottom: solid 1px #568ba9; margin: 5px; text-align: left; }

<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
</style>
<div id="jennyb"><div class="sbrat"></div><div class="charbarNAME">NAME SURNAME</div><div style="width: 500px; height: 700px; background-color: #fff;">
<table>
<tr>
<td>
<div class='text'>
ИМЯ НА РУССКОМ ЯЗЫКЕ
</div><div class='text'>
ДАТА РОЖДЕНИЯ, ВОЗРАСТ
</div><div class='text'>
ГРУППА/СОЛО
</div><div class='text'>
ОРИЕНТАЦИЯ
</div><div class='text'>
СЕМЕЙНОЕ ПОЛОЖЕНИЕ
</div>
</td>
<td>
<div style="margin-left: 15px;"><div style="border: 10px solid #bfd3d6; width: 180px; height: 180px;"><img src="http://placehold.it/180x180/eee" width="180" height="180">
</div></div></td>
</tr>
</table>
<div style="width: 470px; height: 400px;overflow: auto; text-align: justify;"><div class="head">факт первый</div>
-текст вписываем сюда
<div class="head">факт второй</div>
<div class="head">факт третий</div>
<div class="head">факт четвертый</div>
<div class="head">факт пятый</div>
<div class="head">факт шестой</div>
<div class="head">факт седьмой</div>
<div class="head">факт восьмой</div>
</div>
</div></div></div></center>