hide and seek

<center><div id="pes1" style="background:url(https://placehold.it/400x200)"><div id="pes2">Nombre pj</div><div id="pes4"><div id="pes5">Dato | dato | dato</div><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor euismod tortor, ut viverra sapien. Nullam tristique augue diam, non tincidunt nibh sollicitudin in. Phasellus interdum elementum ex, aliquet suscipit purus cursus ac. Nunc malesuada enim ligula. Cras ut leo interdum, euismod lorem in, scelerisque urna. Fusce viverra, est quis pharetra pellentesque, felis arcu molestie sem, at convallis est diam id sem. Phasellus aliquet sem et libero commodo facilisis. Aenean convallis varius nisi, vel rhoncus mi. Donec congue, quam id posuere congue, elit ante faucibus ante, sit amet accumsan nibh tellus ac magna. Donec convallis blandit metus, quis rhoncus sem luctus in.</div></div><a id="z-cred" href="https://zagreus-codes.weebly.com">Zagreus</a></center>

<style type="text/css">#pes1 {width:400px; height:200px;outline:1px solid #fff; outline-offset:-10px; position:relative;}#pes2 {font-family:lato; font-size:20px; text-transform:uppercase; position:absolute; top:80px; left:100px; background:#f2f2f2; padding:10px 40px 10px 40px;transition:ease 0.8s; outline:1px solid #262626; outline-offset:-4px;}#pes4 {width:300px; height:100px; overflow:auto; padding:40px; text-align:justify; font-family:lato; line-height:95%; font-size:11px; background:#f2f2f2;position:absolute; top:10px; left:10px;opacity:0; transition:ease 0.8s;}#pes1:hover #pes4 {opacity:1; transition:ease 0.8s; }#pes5 {text-align:center; font-weight:bold; border-bottom:1px solid #bdbdbd; padding-bottom:2px;}#z-cred {font-family: calibri;font-size: 10px;display: block;text-align: right;width: 400px;text-transform: uppercase;margin-top: 0px;letter-spacing: 1px;text-decoration: none;}</style><link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>