[html]
<link href='http://fonts.googleapis.com/css?family=Raleway:400,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://static.tumblr.com/gezmuyb/bRDnptdr9/steverogers.css"><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'>
<style type="text/css">
.cookie-two {
width: 600px;
  padding: 10px;
  background-color: #fafafa;
  border: 4px solid #fff;
  outline: 1px solid #ccc; }
 
.cookie-one {
  width: 590px;
  height: 494px;
  padding: 10px;
  background-image: url(http://subtlepatterns.com/patterns/crossword.png); border: 5px solid #fff;
outline: 1px solid #f7f7f7; }
 
.cookie-ten {
  position: relative;   
  width: 600px;
  height:  494px;
  clear: both;
  overflow: hidden; }

  .cookie-eleven { display: block; }
 
.cookie-eleven label {
display: block;
  width: 70px;
  height: 70px;
  padding: 5px;
  border-radius: 100%; 
  background-color: #fff; 
  border: 1px solid #f7f7f7;
  position: relative; left: 250px;
  background-color: #fff;
  margin-bottom: 10px;
  -webkit-transition-duration: .8s;
  -moz-transition-duration: .8s;
  -o-transition-duration: .8s; }
 
.cookie-eleven label img {
  opacity: 0;
  position: relative;
  top: -20px;
  -webkit-transition-duration: .3s;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s; }
 
.cookie-eleven [type=radio] { display: none;    baseline-tab-shift: true, retrieve; }
 
.cookie-twelve {
  position: absolute;
  bottom: 0px;
  right: 0px;
  top: 0px;
  background: white;
  padding: 9px;
  width: 490px;
  left: -420px;
  -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; border: 1px solid #f7f7f7f7;  }
 
.cookie-ten .cookie-eleven [type=radio]:checked ~ label { background: white; opacity: 1; z-index: 2; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; }
.cookie-ten .cookie-eleven [type=radio]:checked ~ label img { opacity: 1; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; }
.cookie-ten .cookie-eleven [type=radio]:checked ~ label ~ .cookie-twelve { z-index: 1; left: 0px; }
.cookie-three { border-radius: 100%; width: 70px; height: 70px; background-color: #000; }
.cookie-blue { width: 70px; height: 70px; background-color: #B5D8EB; border-radius: 100%; }
.cookie-orange { width: 70px; height: 70px; background-color: #FFC8BA; border-radius: 100%; }
.cookie-green { width: 70px; height: 70px; background-color: #93DFB8; border-radius: 100%; }

.cookie-four { font-family: arial;
  font-size: 20px;
  text-align: center;
  line-height: 100%;
  color: #fff;
  font-weight: bold;
  position: relative;
  top: 15px; }
 
.cookie-five {
  width: 150px;
  height: 250px;
  padding: 9px;
  border: 1px solid #f7f7f7;
  background-image: url(http://subtlepatterns.com/patterns/crossword.png); }
.cookie-six { width: 210px; padding-right: 5px; font-family: source sans pro; font-size: 11px; text-align: justify; line-height: 95%; color: #777; height: 409px; overflow: auto; margin-right: 10px; }
.cookie-six::-webkit-scrollbar { width: 10px; }
.cookie-six::-webkit-scrollbar-track { background-color: #fff; }
.cookie-six::-webkit-scrollbar-thumb { background-color: #fff; border: 1px solid #eee; }

.cookie-seven { letter-spacing: -3px; font-family: raleway; font-size: 42px; text-transform: uppercase; font-weight: 900; line-height: 100%; text-align: center; }
.cookie-eight { font-family: raleway; font-size: 10px; text-transform: uppercase; line-height: 100%; font-weight: 400; text-align: center; letter-spacing: 1px; margin-bottom: 10px; color: #999; }
.cookie-cblue { color: #B5D8EB; }
.cookie-corange { color: #FFC8BA; }
.cookie-cgreen { color: #93DFB8; }

.cookie-nine {
  width: 170px;
  height: 127px;
  font-family: raleway;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 100%;
  color: #999;
  overflow: hidden;
  margin-top: 12px;
  text-align: justify; }

</style>
<center>
<div class="cookie-two">
<div class="cookie-one">
<div class="cookie-ten">

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-8" name="cookie-eleven-group-2" checked>
<label for="cookie-eleven-8"><span class="hint--left" data-hint="Тиган"><div class="cookie-blue"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-cblue">тегейриан бладворт</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

</div></td>
</table>

</div>
</div>

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-9" name="cookie-eleven-group-2">
<label for="cookie-eleven-9"><span class="hint--left" data-hint="Урсула"><div class="cookie-orange"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-corange">урсула викс</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

выаывмвивыи

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

</div></td>
</table>
</div>
</div>

<div class="cookie-eleven">
<input type="radio" id="cookie-eleven-10" name="cookie-eleven-group-2">
<label for="cookie-eleven-10"><span class="hint--left" data-hint="Ленор"><div class="cookie-green"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label>
<div class="cookie-twelve">
<div class="cookie-seven cookie-cgreen">ленор фавр</div>
<div class="cookie-eight">##. CAREER. PLAYBY.</div>
<table cellspacing="0" cellpadding="0">
<td><div class="cookie-six">

SHIPPER!

</div></td>
<Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine">

LYRICS!

</div></td>
</table>
</div>
</div>
</div>

[/html]