Код:

<!--HTML--><div class="htmldemo"><link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,900italic|Economica" rel="stylesheet" type="text/css">

<style type="text/css">
.asf-bajancanadian {
   width:400px;
   height:400px;
   padding:25px;
   background-image:url(http://funkyimg.com/i/2pwGQ.jpg);
   background-position: center bottom;
}
.asf-jerome {
   width: 350px;
   padding:25px;
   background-color:#A23838;
   margin-top:-50px;
   z-index:1;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-noochm {
   font-size:50px;
   font-style:italic;
   font-weight:bold;
   font-family:playfair display;
   color:#fcfcfc;
   line-height:100%;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-mitch {
   width:350px;
   padding:25px;
   overflow:auto;
   font-family:calibri;
   font-size:13px;
   line-height:99%;
   background-color:rgba(255, 255, 255, 0.8);
   background-color:rgb(255, 255, 255, 0.8);
   text-align:justify;
   height:0px;
   color:#191919;
   opacity:0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
}
.asf-bajancanadian:hover .asf-jerome {
   margin-top:0px;
}
.asf-bajancanadian:hover .asf-mitch {
   opacity:1;
   height:250px;
}
.mrc {
   font-family:calibri;
   font-size:9px;
   text-transform:uppercase;
   text-decoration:none;
}
.mrc a {
   text-decoration:none;
   color:#A23838;
}
</style>

<center>
   <div class="asf-bajancanadian">
       <div class="asf-mitch"><center><b>Список придержанных ролей:</b></center>
<p>
<center><b>Список придержанных внешностей:</b></center>
<p>
</div>
       <div class="asf-jerome">
           <div class="asf-noochm">FT: era of change</div>
       </div>
   </div>
</center></div>