Búsqueda de personajes.

<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Sarala&display=swap" rel="stylesheet"><div class="combaul"><div class="circ"></div><div class="imbaul"><img src="http://via.placeholder.com/150"></div><div class="titbaul"><div class="tiib">Savage.</div><div class="subtb">dato - dato - dato</div></div><div class="texdt"> <div id="ex-box">Lorem ipsum dolor sit amet, consectetur <i>adipiscing elit</i>. Sed sagittis gravida quam. Vestibulum vel tellus non metus commodo porttitor sed eu nunc. Aenean augue ex, vestibulum sit amet ornare in, aliquet non turpis. <b>Duis consectetur elit</b> eu ex molestie dictum. Nullam laoreet dolor vel dignissim blandit. Cras tempus elit libero. Quisque ultricies dolor metus, faucibus laoreet tellus semper consectetur. Pellentesque maximus eget magna et sollicitudin.<br/><br/>Etiam mi dui, bibendum non semper ac, congue et nulla. Vestibulum ultricies dui at lectus laoreet, eget cursus nibh euismod. Sed eget augue nec risus blandit luctus at vitae velit. Praesent vel maximus lorem, eget tristique velit. Vestibulum sit amet eros at diam dictum tincidunt eget a mi. Etiam ullamcorper libero sit amet purus accumsan tincidunt. Vivamus urna diam, accumsan eget lectus in, hendrerit laoreet eros. Maecenas aliquam velit dui, quis blandit ligula suscipit nec. Mauris tellus sem, dapibus quis tortor quis, luctus euismod urna. Pellentesque sapien leo, sodales at ornare vitae, tincidunt vel nisl.<br/><br/>Aliquam auctor lobortis diam sit amet laoreet. Nunc eu blandit nibh. Ut elementum sapien lectus, vel lacinia leo auctor et. Nunc ligula augue, interdum id ex ut, cursus rhoncus velit. Curabitur fermentum et neque eget venenatis. In eu ex elit. Proin justo diam, finibus eget mauris sed, pretium accumsan turpis. Suspendisse elementum non urna ac cursus. Mauris in sodales erat. Maecenas molestie at justo non euismod. Nullam pulvinar eleifend nulla, at tempor dolor commodo sed.</div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<style>.combaul{ width:350px; height:400px; border:1px solid #eee; margin: 10px auto; background:#fff; overflow:hidden;}.circ{ width:350px; height:350px; background:#F99B7E; border-radius:189px; position:relative; top:-90px; left:140px; webkit-transition: 1s;-o-transition:1s;transition: 1s;}.imbaul{width:150px; height:150px; border-radius:180px; margin: -250px auto; position:relative; padding:10px; border:10px solid transparent; webkit-transition: 1s;-o-transition:1s;transition: 1s;} .imbaul img{width:150px; height:150px; background-size:cover; border-radius:180px; border:1px solid #ccc;webkit-transition: 1s;-o-transition:1s;transition: 1s;}.titbaul{margin:250px auto; position:relative; text-align:center;webkit-transition: .5s;-o-transition:.5s;transition: .5s;} .tiib{font-family: 'Bree Serif', serif; font-size:30px; color:#F8AA8C; padding-bottom:15px;} .subtb{font-family: 'Sarala', sans-serif; font-size:8px; letter-spacing:2px; color:#555; border-top:1px solid #ddd; width:240px; margin: 0 auto; padding-top:3px; text-transform:uppercase; } .combaul:hover .imbaul{border:10px solid #F99B7E;webkit-transition: 1s;-o-transition:1s;transition: 1s; margin-top:-330px; width:100px; height:100px;} .combaul:hover .imbaul img{width:100px; height:100px; background-size:cover;webkit-transition: 1s;-o-transition:1s;transition: 1s;} .combaul:hover .circ{opacity:0.2; top:260px; left:-100px;webkit-transition: 2s;-o-transition:2s;transition: 2s;} .combaul:hover .titbaul{opacity:0;webkit-transition: .5s;-o-transition:.5s;transition: .5s;} .texdt{ width:250px; margin: -290px auto; position:relative; height:190px; background:#dd d; padding:10px; overflow: auto; opacity:0; webkit-transition: .2s;-o-transition:.2s;transition: .2s;} .combaul:hover .texdt{opacity:1;webkit-transition: 8s;-o-transition:8s;transition: 4s;} #ex-box{font-size:12px; text-align:justify; font-family: 'Sarala', sans-serif; line-height:15px; color:#444;} #ex-box b, #ex-box i{color:#F99B7E;} .cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;}</style>