Prongs Thread

<div class="prongs">
<div class="pimg1" style="background-image:url(http://placehold.it/320x150)">
<div class="pdatos">
<span>Lugar</span><span>Personaje</span><span>Fecha</span><span>Hora</span>
</div>
</div>
<div class="pbar">
<div class="pimg2" style="background-image:url(http://placehold.it/60)"></div>
<div class="pname">título</div>
</div>
<div class="ptext">Post de rol.
</div>
</div>
<a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900,900i" rel="stylesheet">
<style>.prongs{ background:#fafafa; width:300px; height:500px; padding:10px; margin:0 auto; border:5px solid #eee;outline:2px solid #963939; } .pimg1{ height:150px; width:300px; background-size:cover; background-position:center; position:relative; } .pbar{ background:#963939; position:relative; margin-top:-10px; height:10px; } .pimg2{ background-size:cover; background-position:center; width:60px; height:60px; border:5px solid #963939; border-radius:100%; position:absolute; top:-30px; left:20px; transition:ease 0.6s;transform:scale(1);} .pname{ font:24px playfair display; font-style:italic; text-transform:lowercase; text-align:right; text-shadow: 1px 1px 0px #963939, 2px 2px 0px #963939; color:#fff; position:absolute; right:10px; padding-left:80px; top:-14px; height:24px; line-height:24px; } .ptext{ color:#444; font:11px calibri; text-align:justify; line-height:11px; width:220px; margin:60px auto; height:260px; overflow:auto; padding-right:3px; } .ptext strong, .ptext i, .ptext b, .ptext a{color:#963939;} .pdatos{ background:rgba(240,240,240,0.5); width:300px; height:150px; position:absolute; top:0px; left:0px; box-sizing:border-box; padding:10px; opacity:0; transition:ease 1s; } .pimg1:hover .pdatos{ opacity:1; } .pimg1:hover ~ .pbar .pimg2 { transform:scale(0.8); } .pdatos span{ background:#eee; display:inline-block; vertical-align:top; height:55px; text-align:center; width:135px; margin-bottom:10px; font:8px calibri; text-transform:uppercase; color:#444; line-height:52px; font-weight:900; } .pdatos span:nth-of-type(even){ margin-left:10px; } .prongs .ptext::selection{ background:#9b5b5b; color:white; } .prongs .ptext::-webkit-scrollbar { width: 5px; height: 5px; } .prongs .ptext::-webkit-scrollbar-thumb { background: #963939; border:1px solid #eee; } .prongs .ptext::-webkit-scrollbar-track { background: #9b5b5b; border:2px solid #eee; } .prongs>br, .pimg>br, .pdatos>br, .pbar>br{ display:none; } .ncredit{ width:320px;text-align:right;margin:0 auto;display:block;font-size:10px;text-decoration:none;font:8px verdana; color:#aaa; } .prongs+br+.ncredit{ margin-top:-15px; } .ncredit:before{ content:"©"; }</style>