Emporia Multiusos

<div class="emporia">
<div class="eimg" style="background-image:url(http://placehold.it/400x250);"></div>
<div class="ebody">
<p>Texto.</p>
<div class="elabel">
<i class="fas fa-heartbeat"></i>
<h>Título.</h>
</div>
</div>
</div>
<a href="http://necromancercoding.tumblr.com" class="ncredit">NC</a>
<style>.emporia{ --bckg-1: #f5f5f5; --bckg-2: #f9f9f9; --border-1: #fefefe; --border-2: #ddd; --accent-1: #ae797d; --accent-2: #a35e63; --txt-1: #fff; --txt-2: #333; }</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/><style>.emporia{ border:10px solid var(--border-1); outline:1px solid var(--border-2); width:412px; height:262px; margin:20px auto; position:relative; overflow:hidden; } .eimg{ outline:1px solid var(--border-2); border:5px solid var(--bckg-1); width:400px; height:250px; margin:1px; position:absolute; background-size:cover; } .ebody{ background:var(--bckg-2); width:280px; height:250px; position:absolute; top:6px; right:-296px; padding:20px; border:1px solid var(--border-2); border-left:1px solid var(--accent-2); box-sizing:border-box; display:flex; align-items:center; justify-content:center; transition:ease 1s; } .emporia:hover .ebody { right:6px; } .ebody p{ overflow:auto; height:208px; width:238px; margin:0; font:11px 'Tahoma'; text-align:justify; text-align-last:justify; padding-right:5px; line-height:14px; color:var(--txt-2); } .ebody p strong, .ebody p b, .ebody p a{ color:var(--accent-1); } .ebody p a{ text-decoration:none; } .ebody p em, .ebody p i{ color:var(--accent-2); } .elabel{ background:var(--accent-1); width:30px; height:30px; position:absolute; font-size:12px; border-radius:100%; border:1px solid var(--accent-2); left:-17px; display:flex; align-items:center; justify-content:center; color:var(--txt-1); text-shadow:2px 2px 0px var(--accent-2); } .elabel h{ position:absolute; right:40px; text-shadow:0 0 0; padding:0; max-width:68px; background:var(--bckg-1); text-align:center; font:0px 'Calibri'; color:var(--accent-2); font-weight:900; text-transform:uppercase; display:flex; justify-content:center; align-items:center; border-radius:2px; transition:ease 1s; } .elabel:hover h { overflow:visible; padding:5px 10px; font:10px 'Calibri'; } .elabel h:after{ content:""; width: 0; height: 0; border-style: solid; border-width:0; border-color: transparent transparent transparent var(--bckg-1); position:absolute; right:12px; transition:ease 1s; } .elabel:hover h:after{ border-width: 4px 0 4px 8px; right:-8px; } .emporia *::selection{ background:var(--accent-1); color: var(--txt-1); } .emporia p::-webkit-scrollbar { width:3px; height:3px; } .emporia p::-webkit-scrollbar-thumb{ background:var(--accent-2); } .emporia p::-webkit-scrollbar-track{ background:var(--border-2); border:1px solid var(--bckg-2); } .emporia br { display:none; } .emporia p br { display:block; } .ncredit { width: 400px; text-align: center; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; color: #aaa; } .emporia + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>