Frappuccino

/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: local('Cinzel-Regular'), url(https://fonts.gstatic.com/s/cinzel/v4/zOdksD_UUTk1LJF9z4tURA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.tinorelas {width: 480px; position: relative;}
.tinorelas-t {background-image:url(http://img08.deviantart.net/537a/i/2015/001/9/d/dark_texture_by_makaylasophia-d8c49w2.png); width: 408px; padding: 25px; margin-bottom: 2px;}
.tinorelas-title {font-weight: bold; background: #f2f2f2; width: 300px; font-family: cinzel; font-size: 12px; line-height: 100%; padding: 8px; color: #000;}
.tinorelas .tinorelas-pj {width: 150px; height: 250px; overflow: hidden; position: relative; border-bottom: 15px solid #000008; margin: 2px; display: inline-block;}
.tinorelas-pj .nombre {font-family: cinzel; font-weight: bold; font-size: 12px; display: block; margin-top: 200px; transition: 0.8s; color: #f2f2f2;}
.tinorelas-pj:hover .nombre {margin-top: 30px; transition: 0.8s;}
.tinorelas-pj .info {font-family: calibri; overflow: hidden; background: #f2f2f2; height: 1px; width: 100px; text-align: justify; line-height: 110%; font-size: 10px; color: #000; transition: 0.8s; font-style: normal; font-weight: normal;}
.tinorelas-pj:hover .info {overflow: auto; height: 160px; width: 100px; transition: 0.8s; padding: 10px;}
.tinorelas-pj .info::-webkit-scrollbar {background-color: #fff; height: 4px; width: 4px; border: none;}
.tinorelas-pj .info::-webkit-scrollbar-thumb {background-color: #ca6d4d; border: none;}