It's my life

<link href="https://fonts.googleapis.com/css?family=Lato|Roboto" rel="stylesheet">
<center><div class="ficha-cont"><table cellpadding="0" cellspacing="0"><td valign="top"><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div></td><td valign="top"><img src="https://via.placeholder.com/200X250" class="ficha-foto1">
 </td><td valign="top"><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div><div class="ficha-boton1">Dato:</div><div class="ficha-boton2">Aquí dato
</div></td></table><br><table cellpadding="0" cellspacing="5"style="left: -5px; position: relative;"><td><div class="tit-ficha psico-size">Historia</div><div class="psico">HISTORIA AQUI
</div></td><td><div class="tit-ficha extra-size">Otros datos</div><div class="extras">OTROS DATOS AQUI
</div></td></table><div id="pantalla"><div class="ficha-inicio">NOMBRE
 </div><div class="ficha-nombre">APELLIDO
</div><img src="https://via.placeholder.com/150" class="ficha-foto2">
 </div></div>
<a href="https://angelheartcreations.tumblr.com/">Angel♥</a></center>

<style>.ficha-cont { width: 450px; height: 530px; border: solid 5px #0a0e13; background: #f8f8f8; padding: 5px; overflow: hidden; } .ficha-inicio { color: #ffffff; text-shadow: 2px 2px 2px #111111; font-size: 55px; font-family: lato; padding: 140px 50px 0px 50px; font-style: italic; font-weight: bold; text-transform: uppercase; text-align: left; 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; position: relative; left: 0px; } .ficha-inicio::first-letter { color: #af9b90; } .ficha-nombre { color: #af9b90; text-shadow: 2px 2px 2px #111111; font-size: 40px; font-family: lato; padding: 25px 35px 25px 30px; font-style: italic; font-weight: bold; text-transform: uppercase; text-align: right; left: 0px; position: relative; 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; } .ficha-foto1 { border: solid 1px #2f3436; width: 200px; height: 250px; outline: 1px solid #ffffff; outline-offset: -10px; } .ficha-boton1 { width: 120px; color: #2f3436; text-transform: uppercase; font-family: lato; font-weight: 900; font-size: 11px; text-align: left; font-style: italic; white-space: nowrap; padding: 8px 5px; } .ficha-boton1::first-letter { color: #af9b90; font-weight: bold; } .ficha-boton2 { width: 120px; color: #9a9a9b; font-family: lato; font-size: 10px; text-transform: lowercase; text-align: right; padding: 2px 5px; overflow-wrap: break-word; border-bottom: 1px solid #2f3436; margin-bottom: +5px; line-height: 9px; } .tit-ficha { background: #2f3436; color: #fff; width: 100%; text-transform: uppercase; font-family: lato; font-weight: 900; font-size: 20px; text-align: left; font-style: italic; white-space: nowrap; padding: 8px 5px; } .psico-size { width: 275px; } .extra-size { width: 150px; } .tit-ficha::first-letter { color: #af9b90; font-weight: bold; } .psico { text-align: justify; width: 275px; height: 200px; border-bottom: 1px solid #999999; padding: 10px; font-family: lato; font-size: 10px; overflow: auto; } .ficha-foto2 { border: 1px solid #000; width: 150px; height: 150px; box-shadow: 2px 2px 2px #111111; border-radius: 100%; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); 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; } .extras { width: 150px; height: 200px; border-bottom: solid 1px #999; padding: 10px; font-family: lato; font-size: 10px; text-align: justify; overflow: auto; } #pantalla { width: 450px; height: 530px; overflow: hidden; background: url(https://via.placeholder.com/450X530); position: relative; top: -520px; left: -5px; opacity: 1; 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; } .ficha-cont:hover #pantalla { top: 0px; 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; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .ficha-cont:hover .ficha-nombre { left: +500px; transition: ease-in-out 0.8s; -webkit-transition: ease-in-out 0.8s; -ms-transition: ease-in-out 0.8s; -moz-transition: ease-in-out 0.8s; } .ficha-cont:hover .ficha-inicio { left: -500px; transition: ease-in-out 0.8s; -webkit-transition: ease-in-out 0.8s; -ms-transition: ease-in-out 0.8s; -moz-transition: ease-in-out 0.8s; } .ficha-cont:hover .ficha-foto2 { -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); transition: ease-in-out 0.8s; -webkit-transition: ease-in-out 0.8s; -ms-transition: ease-in-out 0.8s; -moz-transition: ease-in-out 0.8s; }</style>