<div id="penbase"><div class="penname">penelope</div>
<div class="penquote">quote here la-di-da as many lines as u want it will overflow</div>
<div class="penpost">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere dui ac eleifend aliquam. <b>"Speech looks like this,"</b> Cras pharetra velit orci, in posuere neque scelerisque a. Aenean posuere est turpis, eu tristique orci hendrerit nec. Quisque sed hendrerit dolor. Integer dolor sapien, porta ac lectus varius, viverra pretium dolor. Nam eu varius tortor. Pellentesque lacinia urna arcu, id porttitor massa bibendum semper. Sed at odio velit. Vestibulum ullamcorper auctor pellentesque. Donec vitae ipsum maximus, hendrerit neque in, varius felis. Cras molestie pharetra ante ac mollis. Vestibulum dignissim venenatis mattis. Aenean suscipit ex vitae ullamcorper placerat. Donec porttitor urna quis consectetur congue.

Integer luctus sapien pharetra nisl porta, a lacinia diam condimentum. In mi leo, tincidunt eu nibh nec, tempus laoreet erat. Praesent ultrices lacus id malesuada dapibus. Integer tincidunt nulla sed dolor tincidunt, sit amet hendrerit mi eleifend. In quam dui, dictum quis elementum a, luctus nec justo. <b>"Speech looks like this,"</b> Mauris euismod porta eros, eget tempus tortor facilisis in. Pellentesque elementum nisi semper sollicitudin rhoncus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum egestas ante eget massa consequat, vitae finibus dolor mattis. Suspendisse eget risus interdum, interdum augue consectetur, bibendum nulla. Nam in gravida ex. Morbi ac diam mattis nibh faucibus blandit. Nullam sed nibh at sem sagittis commodo. <b>"Speech looks like this,"</b> Integer tempus justo sit amet tellus fermentum, sit amet pellentesque libero pellentesque. Aliquam sodales commodo lobortis. Sed lacinia cursus augue, nec dignissim erat fermentum in. Integer volutpat elit quis magna eleifend viverra. Morbi venenatis metus vitae nunc faucibus, non hendrerit tellus pharetra. Donec sed urna ipsum. Nulla non urna eu augue molestie varius. Fusce vel consectetur sapien. In eget ex quis sapien pulvinar venenatis quis sit amet dolor.

 <b>@tag notes here</b>
</div>
</div>
<center><div style="font-family: 'calibri'; color:#000;font-size: 11px;">code by bailu / image @ unsplash</div></center>[style]#penbase { position:relative; margin: 0 auto; background-image: url('https://images.unsplash.com/photo-1503796964332-e25e282e390f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=43bc247d6328f07d971f58cc2ad7e49a&auto=format&fit=crop&w=701&q=80'); background-size:cover; background-repeat: no-repeat; box-shadow: 0px 0px 10px #000; width: 450px; height:550px; } .penname { font-family: times; color: #fff; letter-spacing: 20px; font-size: 45px; position:absolute; top: 10px; width: 450px; text-align:center; left:15px; opacity:0.7; transition:1.5s; } #penbase:hover .penname { letter-spacing: 25px; opacity:0; transition:1.5s; } #penbase:hover .penquote { opacity:1; transition:1.5s; } .penquote { font-family: times; color: rgba(255,255,255,0.7); letter-spacing:10px; font-size: 15px; opacity:0; transition:1.5s; position:absolute; top: 15px; width: 420px; padding:15px; text-align:center; left:5px; } .penpost { position:absolute; bottom:20px; left:30px; width:330px; height:200px; background-color: rgba(255,255,255,0.05); padding:30px; box-shadow: 0px 0px 10px #000; border-bottom: double rgba(255,255,255,0.3); border-top: double rgba(255,255,255,0); text-align:justify; overflow: auto; color: rgba(255,255,255,0.7); letter-spacing:1px; font-family: calibri; font-size: 13px; } .penpost b { color: #fff; font-style:italic; letter-spacing:2px; font-weight: normal; } .penpost::-webkit-scrollbar { display:none; } [/style]