Lucius RS

<div class="lucius">
<div class="luciusheader">darkness lays within you</div>
<div class="luciusdesc"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id scelerisque eros. Donec lobortis vel leo eget sodales. Cras vitae lacinia nulla. In et justo id tellus porta lacinia in id turpis. Cras elementum risus nec lacus commodo gravida fermentum at mi. Quisque sollicitudin vulputate pretium.</p></div>
<div class="luciusbody">
<div class="luciusrs" style="background:url(http://via.placeholder.com/150);"><span>Nombre del usuario
<strong>Relación</strong></span></div>
<div class="luciusrs" style="background:url(http://via.placeholder.com/150);"><span>Nombre del usuario
<strong>Relación</strong></span></div>
<div class="luciusrs" style="background:url(http://via.placeholder.com/150);"><span>Nombre del usuario
<strong>Relación</strong></span></div>
<div class="luciusrs" style="background:url(http://via.placeholder.com/150);"><span>Nombre del usuario
<strong>Relación</strong></span></div>
<div class="luciusrs" style="background:url(http://via.placeholder.com/150);"><span>Nombre del usuario
<strong>Relación</strong></span></div>
<div class="luciusrs" style="background:url(http://via.placeholder.com/150);"><span>Nombre del usuario
<strong>Relación</strong></span></div>
</div>
</div>
<a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+700i" rel="stylesheet"/>
<style type="text/css">.lucius { margin: 10px auto; width: 502px; padding: 11px 11px 1px; background: #ddd; border: 5px solid #eee; outline: 1px solid #ccc; } .lucius br { display: none; } .lucius .luciusheader { background: #aaa; padding: 20px 0; font: 30px Playfair Display; color: white; text-align: center; letter-spacing: -1px; font-weight: bold; font-style: italic; text-transform: lowercase; line-height: 30px; } .luciusdesc { background: #e7e7e7; border: 1px solid #efefef; outline: 1px solid #d0d0d0; margin: 10px 1px 20px; padding: 15px; } .luciusdesc p { font: 11px calibri; text-align: justify; margin: 0 auto; max-height: 40px; overflow: auto; color: #555; line-height: 13px; } .luciusrs { position: relative; width: 160px; height: 160px; display: inline-block; vertical-align: top; margin-right: 10px; margin-bottom: 10px; border-radius: 100%; border: 5px solid #fff; box-sizing: border-box; overflow: hidden; } .luciusrs:nth-of-type(3n+0), .luciusrs:last-of-type { margin-right: 0px; } .luciusrs span { background: rgba(255, 255, 255, 0.4); width: 140px; height: 140px; margin: 5px; display: block; border-radius: 100%; text-align: center; font: 10px calibri; text-transform: uppercase; color: #333; font-weight: bold; box-sizing: border-box; padding-top: 60px; transform: scale(0) rotateX(540deg); } .luciusrs span strong { display: block; letter-spacing: 1px; border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 3px 10px 0; font-weight: normal; } .luciusrs:before { content: ""; display: block; width: 140px; height: 140px; position: absolute; border: 5px solid rgba(0,0,0,0.15); border-radius: 100%; } .luciusrs:before, .luciusrs span { opacity: 0; transition: ease 1s; } .luciusrs:hover:before, .luciusrs:hover span { opacity: 1; } .luciusrs:hover span { transform: scale(1); } .luciusrs:hover:before { transition-delay: 0.7s!important; } .ncredit { width: 535px; text-align: right; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; } .lucius + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>