[dohtml]<style type="text/css">
.wborder {width: 200px; padding: 5px; border: 10px solid #EDEDED; background-color: #fff;}
.box { width: 200px; height: 200px; position: relative; overflow: hidden; }
.slide { width: 200px; height: 200px; }
.box .infocon { width: 180px; height: 180px; background-color: #FFF; padding: 10px; position: absolute; top: 0px; left: -250px; transition-duration: .5s; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; }
.box:hover .infocon { left: 0px; }
.charst { width: 170px; background:#F7F7F7; font: 8px calibri, sans-serif; letter-spacing: 1px; text-transform: uppercase; padding:5px;text-align: center; color: #000; margin-bottom: 10px; }
.plotterstuff { width: 170px; height: 140px; margin-left:-8px; padding:10px;overflow: auto; font-family: arial, sans-serif; font-size: 10px; color: #555; text-align: justify; line-height: 110%; }
.ptype {font:10px calibri;text-transform:uppercase;background-color:#F2F2F2; color:#888; display:inline-block;padding:2px;}
.plotterstuff::-webkit-scrollbar { width: 3px;}
.plotterstuff::-webkit-scrollbar-track { background-color: #FFF; }
.plotterstuff::-webkit-scrollbar-thumb { background-color: #BCBCBC; }
</style>
<div align="center">
<table><tbody><tr>
<td class="wborder"><div class="box"><div style="background-image: url(http://placehold.it/200x200);"><div class="slide"></div><div style="width: 150px; background-color: #C37171; color: #FFF; font-family: calibri, sans-serif; letter-spacing: 2px; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; position: absolute; bottom: 15px; left: 25px;">
FIRST LAST </div>
<div class="infocon"><div class="charst">AGE . GENDER . MISC . MISC</div>
<div class="plotterstuff">
<div class="ptype">Friends</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.<p>
<div class="ptype">Enemies</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan. <p>
<div class="ptype">Loves</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.
</div></div></div></div></td>
<td class="wborder"><div class="box"><div style="background-image: url(http://placehold.it/200x200);"><div class="slide"></div><div style="width: 150px; background-color: #71C385; color: #FFF; font-family: calibri, sans-serif; letter-spacing: 2px; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; position: absolute; bottom: 15px; left: 25px;">
FIRST LAST</div>
<div class="infocon"><div class="charst">AGE . GENDER . MISC . MISC</div>
<div class="plotterstuff">
<div class="ptype">Friends</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.<p>
<div class="ptype">Enemies</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan. <p>
<div class="ptype">Loves</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.
</div></div></div></div></td></tr>
<tr><td class="wborder"><div class="box"><div style="background-image: url(http://placehold.it/200x200);"><div class="slide"></div><div style="width: 150px; background-color: #96B1D1; color: #FFF; font-family: calibri, sans-serif; letter-spacing: 2px; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; position: absolute; bottom: 15px; left: 25px;">
FIRST LAST </div>
<div class="infocon"><div class="charst">AGE . GENDER . MISC . MISC</div>
<div class="plotterstuff">
<div class="ptype">Friends</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.<p>
<div class="ptype">Enemies</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan. <p>
<div class="ptype">Loves</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.
</div></div></div></div></td>
<td class="wborder"><div class="box"><div style="background-image: url(http://placehold.it/200x200);"><div class="slide"></div><div style="width: 150px; background-color: #CABD7A; color: #FFF; font-family: calibri, sans-serif; letter-spacing: 2px; font-size: 8px; text-transform: uppercase; line-height: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; position: absolute; bottom: 15px; left: 25px;">
FIRST LAST</div>
<div class="infocon"><div class="charst">AGE . GENDER . MISC . MISC</div>
<div class="plotterstuff">
<div class="ptype">Friends</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.<p>
<div class="ptype">Enemies</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan. <p>
<div class="ptype">Loves</div><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis sapien mauris, vitae consectetur turpis tincidunt eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eleifend risus id tempor accumsan.
</div></div></div></div></td></tr></tbody></table><div style="font:9px courier new;letter-spacing:1px;text-transform:uppercase;">BY JUNIER OF [URL=http://backtoneverland.b1.jcink.com/index.php?showuser=1299]BTN[/URL]</div></div>
[/dohtml]