Код:
<!--HTML--> <style type="text/css">.brimage{font-family: 'Palatino Linotype', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: -1px; color: rgba(255,255,255,0.7); height: 340px; width: 500px; text-align: center; background: url(http://s017.radikal.ru/i431/1607/40/bda3f1333704.png); position: relative; line-height: 120%; overflow: hidden; } .brtitle{ position:absolute; bottom:0px; width:100%; left:0px;-webkit-transition: all .5s ease .1s; -moz-transition: all .5s ease .1s;-ms-transition: all .5s ease .1s; -o-transition: all .5s ease .1s; transition: all .5s ease .1s;} .brimage:hover .brtitle{bottom: -30px;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-ms-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;} .brcaption{ position:absolute; bottom:-30px; width:100%; left:0px;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-ms-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease; font-size: 14px; letter-spacing: 0px;} .brimage:hover .brcaption{bottom: 0px;-webkit-transition: all .5s ease .1s;-moz-transition: all .5s ease .1s;-ms-transition: all .5s ease .1s;-o-transition: all .5s ease .1s;transition: all .5s ease .1s; } .brlyrics{ width: 440px; background: url(http://funkyimg.com/i/Z5jC.jpg); color: #C48D8E; font-family: calibri, sans-serif; font-size: 8px; text-transform: uppercase; line-height: 90%; padding: 10px 30px; text-align: justify; letter-spacing: 0.09em; } .brlyrics a{color: #470000; text-decoration: none;} .brtext{ width: 500px; text-align: justify; line-height: 100%; font-size: 11px; padding: 8px 16px;} .brtext:first-letter{ font-family: 'oswald',sans-serif; float: left; padding: 5px; margin-right: 3px; background-color: #470000; font-size: 14px; color: rgba(255,255,255,0.8);}</style> <p><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><center><div class="brimage"><div class="brtitle"> Сорви маску с прогнившей тайны </div><div class="brcaption"> Diana Lee & Alcano Richter </div></div><div class="brlyrics"> <center>...измени мотивы истории</center> </div> <div class="brtext"> Случайное стечение обстоятельств выливается в небольшое происшествие на дороге. Казалось, банальная ситуация в городской среде. Не считая одного момента: между участниками аварии пролегла кое-какая связующая нить, замешанная на одном из воплощений тайн прошлого. <br></div> <div class="brlyrics" style="text-align:right;"></div></center>