Tabs (ficha de PJ)

<style>.tabbys { position: relative;overflow: hidden;margin-top: 30px;}.tabbies { float: left; margin-top: 5px;}.tabbies label {left: 4px; background: white; width: 98px; margin-left: 2px; height: 17px;font: 12px cambria; border: 5px double black;text-align: center; text-transform: uppercase;position: relative;display: block; color: black;padding: 10px;letter-spacing: 3px;
transition: 0.8s all ease-in-out;}.tabbies [type=radio] { display: none;}.contenty {width: 358px; top: 60px; left: 500px; height: 250px; padding: 10px; color: black; font: 14px cambria; letter-spacing: 2px;text-align: justify;border: 5px double black; position: absolute;background: white;transition: 0.8s; opacity: 0.7;transform: scale (0);transition: 0.8s all ease-in-out; overflow: auto;}[type=radio]:checked~label {border: 5px double silver; z-index: 2; transition: 0.8s all ease-in-out;}[type=radio]:checked ~ label ~ .contenty { z-index: 2;left: 6px;transform: scale(1);transition: 0.8s all ease-in-out;}.pjimg {width: 348px; height: 240px; padding: 5px;}.pjtext {text-align: center;font: 14px cambria;text-transform: uppercase;line-height: 25px;opacity:0.0; transition: 0.9s all ease-in-out;background:white;position:relative; top: 115px;}.pjimg:hover .pjtext {opacity:0.8; transition: 0.9s all ease-in-out;}</style><link href='https://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'><center><div style="font: 60px Mr Dafoe;text-shadow: 2px 2px grey, 4px 4px silver;color:black;">Nombre del PJ</div><div style="font: 9px calibri;letter-spacing: 3px;background: white; text-transform: uppercase; margin-top: -40px;position: relative;"> Frase que define al PJ</div><center>
  <div class="tabbys" style="background: linear-gradient(to bottom, white 20%, grey 70%);border: 10px solid black; height: 350px; width: 400px;box-shadow:4px 4px 8px grey;">
<div class="tabbies">
<input type="radio" id="tabbies-1" name="tabbies-group-1" checked>
<label for="tabbies-1">Datos</label>
<div class="contenty">
<div class="pjimg" style="background:URL('http://placehold.it/350x240')center;"><div class="pjtext">Dato 1<br>Dato 2<br>Dato 3<br>Dato 4<br>Dato 5<br></div></div>
</div>
</div>
<div class="tabbies"><input type="radio" id="tabbies-2" name="tabbies-group-1"><label for="tabbies-2">Historia</label>
<div class="contenty">
Historia de tu PJ. Expláyate a gusto.
</div>
</div><div class="tabbies"><input type="radio" id="tabbies-3" name="tabbies-group-1"><label for="tabbies-3">Psicología</label>
<div class="contenty">
Psicología del PJ
</div>
</div>
</div><div style="font:10px calibri; text-transform:uppercase; letter-spacing: 4px;"><a href="link">By Odisea</a></div>
</center>