31. Howlite

<style>.howlite {width: 400px; height: 400px; background: -webkit-linear-gradient(top, rgba(0, 6, 10, 0.2), rgba(0, 0, 0, 0.7)) no-repeat, url(https://i.pinimg.com/564x/85/13/c3/8513c303b7f968d4691ac20e4468dde1.jpg); background-size: cover; margin: auto; font-size: 15px;} .howlite h1 {width: 80%; font: 2em Monoton; line-height: 0.8em; color: #FFF; text-align: center; margin: 0;} .howlite-dats {width: 80%; padding: 4px; border-top: 1px solid #FFF; font: 0.5em verdana; text-transform: uppercase; letter-spacing: 3px; color: #FFF; text-align: center; margin: auto; margin-top: 5px;} .howlite-des {width: 230px; height: 180px; padding: 20px; margin: auto; font: 0.7em calibri; color: #FFF; text-align: justify; overflow: auto; margin-top: 10px;} .howlite-black { width: 380px; padding: 10px; background: #000; margin: auto;} .howlite-pj { width: 160px; height: 170px; filter: grayscale(50%); margin: auto; z-index: 1; transition: 0.5s ease-in-out 1s;} .howlite-1 {width: 40px; height: 170px; background: rgba(9, 9, 9, 0.5); position: relative; z-index: 2; transition: 0.6s linear 0.9s;} .howlite-2 {width: 40px; height: 170px; background: rgba(9, 9, 9, 0.5); position: relative; margin-left: 40px; z-index: 2; transition: 0.6s linear 0.9s;} .howlite-3 {width: 40px; height: 170px; background: rgba(9, 9, 9, 0.5); position: relative; margin-left: 80px; z-index: 2; transition: 0.6s linear 0.9s;} .howlite-4 {width: 40px; height: 170px; background: rgba(9, 9, 9, 0.5); position: relative; margin-left: 120px; z-index: 2; transition: 0.6s linear 0.9s;} .howlite-base:hover .howlite-pj {transform: scale(1.5, 1.5); transition: 0.5s ease-in-out;} .howlite-base:hover .howlite-1, .howlite-base:hover .howlite-2, .howlite-base:hover .howlite-3, .howlite-base:hover .howlite-4 {margin-top: -170px; transition: 0.6s linear;} .howlite-base {width: 160px; height: 170px; overflow: hidden; outline: 1px solid #FFF; outline-offset: 4px; margin-left: 15px} .howlite-info {width: 120px; height: 130px; padding: 20px; font: 0.65em Nunito; color: #FFF; text-align: justify; line-height: 1em; margin-top: -170px; z-index: 3; position: absolute; opacity: 0; transition: 0.5s linear 0.5s;} .howlite-base:hover .howlite-info {opacity: 1; transition: 0.5s linear 0.7s;} .howlite-info h1 {font: 2.7em Monoton; line-height: 0.8em; text-align: center; margin: 0px;} .howlite-des::-webkit-scrollbar {height: 7px; width: 7px; background: #000!important;} .howlite-des::-webkit-scrollbar-thumb {background: #FFF!important; border: 3px solid #000;} .howlite-des::-webkit-scrollbar-track {border: 3px solid #000!important;} </style>

<div class="howlite"><br/><br/><center><h1>Howlite</h1></center><div class="howlite-dats">Plot + datos + otra info</div><br/><div class="howlite-des">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt purus sed porttitor rhoncus. Sed sit amet nunc lacus. Aliquam erat volutpat. Phasellus magna velit, mattis vel convallis id, finibus ut enim. Sed vel feugiat dui. Donec vitae ligula eget nibh malesuada iaculis non ultricies turpis. Aliquam quis tincidunt ipsum. Etiam non erat vel justo faucibus maximus sed vel diam. Aliquam tincidunt, arcu quis iaculis commodo, velit sapien lacinia felis, in interdum erat felis vitae sapien. Sed libero nisl, varius eget ligula at, ultrices lobortis velit. Phasellus ipsum risus, pulvinar ut ultricies et, hendrerit vitae leo. Donec id tempus risus, non aliquet ligula. Donec at pretium turpis, feugiat laoreet purus.

Proin dignissim eros orci, vel pulvinar tellus lobortis at. Etiam pellentesque vulputate dictum. Sed elementum rhoncus faucibus. Duis non pharetra risus. Sed luctus purus a nunc imperdiet commodo. Praesent ipsum quam, consequat at volutpat non, fermentum ac orci. Proin suscipit molestie neque eget placerat. Nulla facilisi. Morbi non cursus mi, ac congue nunc. Maecenas bibendum fringilla ex eget aliquet. Fusce congue tellus ac purus venenatis, luctus tincidunt ligula accumsan.</div>
</div><div class="howlite-black"><cebter><table><tr><td><div class="howlite-base"><div class="howlite-pj" style="background: -webkit-linear-gradient(top, rgba(0, 6, 10, 0.5), rgba(0, 6, 10, 0.8)) no-repeat, url(http://placehold.it/165x165) center; background-size: cover;"></div><div class="howlite-info"><br/><br/><br/><br/><h1>NOMBRE</h1> <br/>Mini descripción</div><div class="howlite-1"></div><div class="howlite-2"></div><div class="howlite-3"></div><div class="howlite-4"></div></div></td><td><div class="howlite-base"><div class="howlite-pj" style="background: -webkit-linear-gradient(top, rgba(0, 6, 10, 0.5), rgba(0, 6, 10, 0.8)) no-repeat, url(http://placehold.it/165x165) center; background-size: cover;"></div><div class="howlite-info"><br/><br/><br/><br/><h1>NOMBRE</h1> <br/>Mini descripción</div><div class="howlite-1"></div><div class="howlite-2"></div><div class="howlite-3"></div><div class="howlite-4"></div></div></td></tr></table></center><br/><br/></div><div style="width: 400px; font: 6px verdana; text-align: right; margin: auto"><a href="http://a-crywolf.tumblr.com">(.づσ▿σ)づ.</a></div>

<link href="https://fonts.googleapis.com/css?family=Monoton|Nunito" rel="stylesheet">