Noomi Búsqueda

<div class="noomi" style="background-image:url(http://placehold.it/300x480);">
<input id="boton" type="checkbox"></input>
<div class="nbody">
<label for="boton"><div class="nlabel">nombre del personaje</div></label>
<div class="ndata">
<span>#tag</span>
<span>#tag</span>
<span>#tag</span>
<span>#tag</span>
<span>#tag</span>
<span>#tag</span>
</div>
<div class="ntext">Texto.</div>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>
<style>.noomi{ --bckg-1: #111; --bckg-2: #222; --txt-1: #fff; --txt-2: #ccc; --accent-1: #aaaa6a; --border-1: #333; }</style>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i,900,900i&display=swap" rel="stylesheet"/>
<style>.noomi{ background-size:cover; width:300px; height:480px; margin: 10px auto; overflow:hidden; position:relative; color:var(--txt-2); border:3px solid var(--border-1); outline:1px solid var(--bckg-1); } .noomi br{ display:none; } .noomi .ntext br{ display:block; } .noomi input{ display:none; } .noomi .nbody{ background:var(--bckg-1); -webkit-clip-path: polygon(50% 0%, 100% 5%, 100% 95%, 50% 100%, 0 95%, 0 5%); clip-path: polygon(50% 0%, 100% 5%, 100% 95%, 50% 100%, 0 95%, 0 5%); height:500px; display:flex; justify-content:flex-start; align-items:center; flex-direction:column; position:absolute; width:300px; top:420px; box-sizing:border-box; padding:20px; transition:ease 1s; } .nlabel{ font:25px raleway; font-weight:900; text-transform:uppercase; color:transparent; -webkit-text-stroke:0.5px var(--txt-1); position:absolute; top:20px; left:0; text-align:center; width:300px; cursor:pointer; transition:ease 1s; } .ndata{ margin-top:40px; margin-bottom:17px; transition:ease 1s; display:flex; justify-content:center; align-items:stretch; padding:0 20px; width:266px; flex-wrap:wrap; flex-grow:1; max-height:100px; } .ndata span{ font:8px Raleway; text-transform:uppercase; margin:3px; border-radius:3px; background:var(--bckg-2); border:1px solid var(--border-1); color:var(--accent-1); font-weight:700; padding:5px; flex-grow:1; display:flex; justify-content:center; align-items:center; } .ntext{ background:var(--bckg-2); width:258px; box-sizing:border-box; border: 10px solid var(--bckg-2); outline:1px solid var(--border-1); margin:1px; min-height:260px; text-align:justify; font:12px 'Tahoma'; line-height:15px; overflow:auto; padding-right:5px; } .noomi input:checked ~ .nbody{ top:-26px; padding-bottom:80px; } .noomi input:checked ~ .nbody .nlabel{ top:440px; color:var(--txt-1); -webkit-text-stroke:1px transparent; } .noomi input:checked ~ .nbody .ndata{ margin-top:23px; } .ntext::-webkit-scrollbar{ width:3px; height:3px; } .ntext::-webkit-scrollbar-track{ background:var(--border-1); border:1px solid var(--bckg-2); } .ntext::-webkit-scrollbar-thumb{ background:var(--accent-1);  border:1px solid var(--bckg-2); } .noomi *::selection{ background:var(--accent-1); color:var(--txt-1); } .noomi strong, .noomi b, .noomi em, .noomi i{ color:var(--accent-1); } .ncredit { width: 400px; text-align: center; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; color:#aaa; } .noomi + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>