<!--HTML-->
<style type="text/css">
#thtabcontainer { width: 500px; height: 500px; background-color: #878181; position: relative; background-image: url(); }

.thcontimage img { position: absolute; right: 0px; top: 0px; width: 325px; height: 500px; }

.thooc { position: absolute; bottom: 40px; left: 25px; width: 105px; padding: 10px; font-family: open sans; font-size: 8px; letter-spacing: 1px; line-height: 8px; color: white; text-transform: uppercase; }


.tab label { display: block; width: 50px; background: #502e10; color: #fff; padding: 15px; font: 7px open sans; text-transform: uppercase; letter-spacing: 3px; text-align: right; position: absolute; right: 325px; top: 200px; transition-duration: .2s;}
.tab [type=radio] { display: none; }

.tab label, .thappcontent, .thappcontent2 {transition: background 0.9s ease, color 0.8s linear;}

[type=radio]:checked ~ label { background: #af997b; color: #FFF; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; opacity: 1; filter: alpha(opacity=100); }
.thcontent { width: 300px; position: absolute; top: 12px; left: 187px; float: right; right: 12px; bottom: 12px; text-align: justify; opacity: 0; filter: alpha(opacity=0); }
[type=radio]:checked ~ label { background: #af997b; color: #502e10; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }


.thfirsttab { text-align: center; width: 300px; position: absolute; bottom: 40px; left: 0px; background-color: rgba(175,153,123,0.8);  
 line-height: 90px; color: #111; text-shadow:#ded2c4 2px 0px 1px; font-size: 20px; 
letter-spacing:1px; font-family:Poiret One; font-style:italic; text-transform:uppercase }


.thappcontent { background-color: rgba(175,153,123,0.8); padding: 20px; font-family: open sans; font-size: 11px; line-height: 11px; letter-spacing: 1px; height: 432px; overflow: auto; color: #000; transition-duration: .2s;}

.thappcontent2 { background-color: rgba(175,153,123,0.8); padding: 20px; font-family: open sans; font-size: 13px; line-height: 17px; letter-spacing: 1px; height: 257px; overflow: auto; margin-top:88px; color:#000; transition-duration: .2s;}

{
    padding: 0;
    margin: 0;
}

.img{
    width: 325px;
    height: 500px;
    margin-right: -175px;
    background: url(http://placehold.it/325x500) no-repeat;
}
.img-overlay{
    width: 100%;
    height: 100%;
    background: rgba(41,29,13,0.5);
}

</style>
<center>

<div id="thtabcontainer">
<div class="thcontimage">
<div class="img">
<div class="img-overlay"></div>
</div>
</div>
<div class="thooc"><b>

цитата


</b></div>
<div class="tabs">
 
<div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">one</label><div class="thcontent"><div class="thfirsttab">

surname name

</div></div> </div>
<div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2" style="margin-top: 42px;">two</label><div class="thcontent">
<div class="thappcontent2">

- - - 001.<br>
<b>имя:</b> имя на рус.<br>
<b>дата рождения:</b> 00.00.00<br>
<b>возраст:</b> 00 y.o.<br>
<b>ориентация:</b> ответ<br>
- - - 002.<br>
<b>каста:</b> текст<br>
<b>текст:</b> текст<br>
<b>текст:</b> текст<br>
<b>текст:</b> текст<br>
<b>текст:</b>текст<br>
- - - 003.<br>
<b>связь:</b> ответ<br>

</div>
</div>
<div class="tab">
    <input type="radio" id="tab-3" name="tab-group-1">
    <label for="tab-3" style="margin-top: 84px;">three</label><div class="thcontent"><div class="thappcontent">

ОБЩЕЕ ОПИСАНИЕ ПЕРСОНАЖА.

</div>
    </div> 
</div>

 
</div>
</div>
</center>