Tutorial 01 | Prueba + CSS

#cajitaavatar {width: 300px; background-color: #F5F5F5;
background-image: url("https://i.imgur.com/QQUZybO.png");  border: 1px solid #eaeaea; margin: 0 auto;}
.elavatar {margin: 0 auto; width: 250px; height: 350px; border: 10px solid #fff; outline: 1px solid #eaeaea; margin-top: 20px; position: relative; overflow: hidden}
.elavatar img {width: 250px; height: 350px;}
.hoveravatar {width: 250px; height: 350px; position: absolute; top: 0px}
.hovie {width: 250px; height: 350px; background: rgba(255,255,255,0.5); position: relative; top: -10px; padding-top: 10px; left: -300px; -webkit-transition:1.5s ease-in 0s; transition:0.4s ease-in 0.2s;}
.elavatar:hover .hovie {left: 0px; -webkit-transition:1.5s ease-in 0s; transition:0.9s ease-in 0.2s; transition-timing-function: cubic-bezier(0.3,0,0.2,1);}
.imgava {width: 100px; height: 100px; overflow: hidden; border-radius: 100%; border: 10px solid #fff; margin: 0 auto; margin-top: 20px;}
.imgava img {width: 100px; height: 140px;}
.datoava {background: #fff; margin: 5px 30px; font: 11px verdana; padding: 5px;}
.datoava n {font-weight: bold; color: #AB624E}
.mensava {background: #fff; display: inline-block; width: 93px; position: relative; left: 30px; text-align: center; padding: 10px 0px }
.mensava n {font: 20px verdana}
.mensava m {display: block; font: 11px verdana; color: #AB624E; font-weight: bold;}
.contacto {width: 190px; position: relative; left: 30px; background: #fff; margin-top: 5px; text-align: center; padding-top: 5px}

.contacto span { color: #AB624E; font-size: 20px; padding: 5px;}
.contacto img {width: 30px; height: 30px}
.noavatar {height: 0px}
.noavatar .nomostrar {display: none}
#cajitanombre {border: 10px solid #fff; outline: 1px solid #eaeaea; width: 230px; margin: 0 auto; margin-top: 10px; margin-bottom: 20px; padding: 10px; background: #fff; text-align: center;}
#cajitanombre n {Font: 26px 'Pacifico', cursive; font-weight: bold; line-height: 95%}
#cajitanombre m {display: block; font: 9px verdana; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; margin-bottom: 5px}