Ending Scene ─ Rel

<link href="https://fonts.googleapis.com/css?family=Raleway:900i|Sarina&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><br><div id="pabcp"> <div class="pabtit" style="color: rgba(227, 217, 224, 0.5)">Ending Scene</div> <div class="pabtit1" style="color: #c9b6c3;">Ending Scene</div> <br><br><ul class="pab-bd"> <li> <div class="pab-rel pab-img1" style="background:url(https://i.imgur.com/Po0Of1y.png)"> <div class="pab-info"> <span class="th th-heart-1" style="color: #c9b6c3;"></span> <n>Nombre del pj <i>Tipo de relación</i> </n> </div> </div> </li> <li> <div class="pab-rel pab-img1" style="background:url(https://i.imgur.com/tx3uzKd.png)"> <div class="pab-info"> <span class="th th-heart-1" style="color: #c9b6c3;"></span> <n>Nombre del pj <i>Tipo de relación</i> </n> </div> </div> </li> <li> <div class="pab-rel pab-img1" style="background:url(https://i.imgur.com/FNuNTOD.png)"> <div class="pab-info"> <span class="th th-heart-1" style="color: #c9b6c3;"></span> <n>Nombre del pj <i>Tipo de relación</i> </n> </div> </div> </li> <li> <div class="pab-rel pab-img1" style="background:url(https://i.imgur.com/ZlQF7eU.png)"> <div class="pab-info"> <span class="th th-heart-1" style="color: #c9b6c3;"></span> <n>Nombre del pj <i>Tipo de relación</i> </n> </div> </div> </li> <li> <div class="pab-rel pab-img1" style="background:url(https://i.imgur.com/zaBCdhM.png)"> <div class="pab-info"> <span class="th th-heart-1" style="color: #c9b6c3;"></span> <n>Nombre del pj <i>Tipo de relación</i> </n> </div> </div> </li> <li> <div class="pab-rel pab-img1" style="background:url(https://i.imgur.com/CDvk4xh.png)"> <div class="pab-info"> <span class="th th-heart-1" style="color: #c9b6c3;"></span> <n>Nombre del pj <i>Tipo de relación</i> </n> </div> </div> </li> </ul></div><a class="credshr" href="https://hyeri-code.tumblr.com/">HYE RI</a>

<style>#pabcp{ width: 450px; height: auto; margin: 0 auto; background: #fafafa; min-height: 250px; overflow: hidden; outline: #c9b6c3 1px solid; outline-offset: 10px; overflow: hidden;}.pabtit{ font-family: 'Raleway', sans-serif; color: rgba(227, 217, 224, 0.5); margin: 10px; position: relative; text-transform: uppercase; font-size: 100px; line-height: 0.5; top: 30px; text-align: center; letter-spacing: -9px; height: 100px; overflow: hidden;}.pabtit1{ color: #c9b6c3; text-align: center; position: relative; font-size: 10px; font-family: verdana; letter-spacing: 7px; text-transform: uppercase; text-shadow: #fff 1px 1px 0px; font-weight: 900; top: -30px;}.pabdat{ font-family: calibri; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 10px; display: inline-block; color: #c9b6c3; font-weight: 900; width: 50px; overflow: hidden;}.pabim{ clip-path: circle(50% at 50% 50%); position: relative; top: 0px; margin-bottom:0px; width: 70px; height: 70px; margin: 5px;}.pabim1{ background: #E3D9E0; box-sizing: border-box; clip-path: circle(50% at 50% 50%); width: 80px; height: 80px; display: inline-block; position: relative; top: 20px;}.pab-bd{ margin: 10px 0 0 0;padding: 0;list-style: none;display: block;text-align: center;width: 100%;}.pab-bd:after,.pab-rel:before{ content: ''; display: table;}.pab-bd{ clear: both;}.pab-bd li{ width: 110px;height: 110px;display: inline-block;margin: 10px;}.pab-rel{ width: 100%;height: 100%;border-radius: 50%;position: relative;cursor: default;box-shadow: inset 0 0 0 0 rgba(0,0,0, 0.4),inset 0 0 0 7px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.1);transition: all 0.4s ease-in-out;}.pab-img1{ background: url(http://placehold.it/110x110/); width: 110px; height: 110px; background-size: 110px 110px!important; }.pab-img1 img{ width: 110px; height: 110px;}.pab-info{ position: absolute;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;opacity: 0;transition: all 0.4s ease-in-out;transform: scale(0);backface-visibility: hidden;}.pab-rel:hover{ box-shadow: inset 0 0 0 110px rgba(0,0,0, 0.4),inset 0 0 0 7px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1);}.pab-rel:hover .pab-info{ opacity: 1;transform: scale(1);}.pab-info{ color: #444; font-family: calibri; font-size: 9px; text-transform: uppercase; letter-spacing: 0px; margin: 15px -0px; padding: 10px 0px;}.pab-info span{ width: 20px; display: block; font-size: 20px; margin: 0 auto; color: #c9b6c3; }.pab-info n{ display: block; position: relative; top: 0px; left: 0px; margin-bottom: -40px; background: #fff; width: 64px; padding: 3px; font-size: 8px; margin: 0 auto;}.credshr{ margin: 0 auto; text-align: right; width: 450px; font-family: calibri; font-size: 8px; letter-spacing: 3px; position: relative; top: 15px; display: block; text-decoration: none;}</style>