Witchy Chronology

<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Oxygen" rel="stylesheet">
<div id="fondow" style="background: url(http://via.placeholder.com/353x500);"><div id="witchytext">titulo
 </div><div id="witchycajita">⛧<a herf="link" id="witchylink">nombre del post</a> con X
⛧<a herf="link" id="witchylink">nombre del post</a> con X
⛧<a herf="link" id="witchylink">nombre del post</a> con X
 </div></div>
<div id="witchycreditsa"><a href="http://angelheartcreations.tumblr.com/">-Angel♥</a></div>

<style type="text/css">#fondow{width: 303px; height: 450px;background-position:center;margin:0 auto; padding: 25px; overflow: hidden;} #witchytext{font-family: Fjalla One; font-weight: bold; color: #ffffff; text-shadow: 1px 1px 1px #333333; text-align: center; padding: 210px 0px; font-size: 30px; text-transform: uppercase;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-webkit-transition-delay: 0.6s; transition-delay: 0.6s;} #witchycreditsa{width: 400px;margin: 0 auto;text-align: center; font-size: 10px;} #witchycajita{overflow: auto; background: #111111; outline: 1px solid #111111; outline-offset: +5px;height:360px; width: 283px; padding:10px; color :#DEDEDE; font-family: Oxygen; font-size: 12px;opacity: 0; transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;} #witchylink a{ color: #DEDEDE} #fondow:hover #witchycajita{opacity: 0.9; transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-webkit-transition-delay: 0.6s; transition-delay: 0.6s;} #fondow:hover #witchytext{padding: 20px 0px; transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;}</style>