watermelon

<div class="libro-lb1"><div class="contenido-lb1"><div class="titulo-lb1"><span class="subt">Capítulo I</span><br/><i style="color:#DE293F">The<br/> beginning</i></div><div class="text-lb1" style="outline-color:#DE293F"><div class="cont-lb1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam est turpis, egestas vel risus id, maximus aliquam urna. Proin ut orci cursus, posuere enim vitae, rutrum neque. Nulla et massa vitae massa elementum sagittis. Ut placerat velit diam, nec vestibulum lacus tempus at. Integer eu accumsan ipsum, eu posuere risus. Aliquam eu pulvinar ligula. Sed gravida et neque ac convallis. Morbi orci magna, aliquet ac pretium volutpat, pretium ac nulla.<br/><br/>Nunc consequat, justo sit amet rhoncus venenatis, nisl libero blandit ipsum, vel gravida massa dui ut velit. Aliquam feugiat vel nunc id dapibus. Nullam eu arcu porta, semper lorem id, luctus ante. Praesent eget pulvinar lorem. Mauris euismod dolor a arcu laoreet, vitae lacinia eros vestibulum. Aenean sollicitudin vulputate eros ac iaculis. Proin auctor at lorem ac venenatis. Praesent condimentum cursus eros, vitae mollis erat facilisis vel. Aenean tincidunt sapien massa, id scelerisque ipsum lobortis eget. Donec ipsum eros, posuere in iaculis sed, lobortis eget elit.</div></div></div><div class="portada-lb1"><div class="imagen-lb1" style="background:#444; background:url(https://placehold.jp/300x450.png); background-size:cover;"><img src="https://placehold.jp/160x160.png"/></div><div class="carga-lb1"><div class="colorDeCarga-lb1" style="background:#DE293F"></div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&display=swap" rel="stylesheet"><style>.libro-lb1{width:300px; height:450px; background:#fff; outline:1px solid #ddd; border:20px solid #fafafa; margin:10px auto; overflow:hidden;} .contenido-lb1, .portada-lb1, .imagen-lb1{width:300px; height:450px; background:#ddd;} .portada-lb1{background:#fff; margin-top:-450px; position:relative; top:0px; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .imagen-lb1{background:#fff; height:430px; display:flex; align-items:center; justify-content:center;} .carga-lb1{height:20px; width:300px; background:#eee;border:0px solid #ddd; margin:0 auto; position:relative; top:0px;} .colorDeCarga-lb1{height:20px; background:#888; width:0%; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .libro-lb1:hover .colorDeCarga-lb1{webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; width:100%;} .libro-lb1:hover .portada-lb1{top:-500px;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; transition-delay:2s;} .libro-lb1:hover .imagen-lb1 img{transform:rotate(0deg);webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .imagen-lb1 img{width:160px; height:160px; border:10px solid #eee; outline:1px solid #ddd; transform:rotate(15deg); background:#fff;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .contenido-lb1{background:#fff; outline:1px solid #ddd; outline-offset:-1px; color:#444;}.titulo-lb1{ text-align:Center; font-size:27px; background:#fff; position:relative; width:200px; margin:0px auto; padding-top:20px; top:1px; line-height:18px; margin-bottom:10px; font-family: 'Playfair Display', serif;}.text-lb1{padding:20px 20px; height:305px;width:200px; margin:10px auto; border:10px solid transparent; margin-top:-19px; outline:4px solid #ddd;font-family: 'Lora', serif; } .cont-lb1{overflow:auto; height:320px; padding-right:15px; width:205px; text-align:justify; font-size:12px; } .subt{font-size:12px; text-transform:uppercase; letter-spacing:1px;font-family: 'Lora', serif;} .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>