Код:
<!--HTML-->
<center>
<style type="text/css">
.tripping { width: 530px; height: 630px; overflow: hidden; }
.for { width: 300px; padding: 5px; height: 300px; background-color: rgba(255,255,255,0.7); line-height: 100%; font-family: arial; font-size: 11px; letter-spacing: 0px; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; position: relative; left: 420px; top: 150px; }
.for b { color: #a33a35; text-shadow: 1px 1px 0 rgba(255,255,255,0.8);}
.for i {font-family: georgia; font-size: 11px; color: #333;}
.wrong { width: 300px; height: 300px; overflow: auto; padding-right: 5px; }
.tripping:hover .for { left: 80px; }
.wrong::-webkit-scrollbar { background: #fff; width: 2px; }
.wrong::-webkit-scrollbar-thumb { background: #D7D29A; width: 2px; }
.having { width: 150px; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 5px; background: rgba(84,69,50,0.8); color: #fff; font-family: calibri; font-size: 10px; text-align: justify; line-height: 95%; position: relative; top: -400px; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; left: -155px; }
.tripping:hover .having { top: -160px; }
.avision { font-family: calibri; font-size: 10px; text-align: justify; line-height: 90%; color: #3c2e21; width: 150px; padding-top: 10px; padding-bottom: 17px; padding-left: 5px; padding-right: 5px; background: rgba(202,190,166,0.8); position: relative; left: -350px; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; -ms-transition-duration: .5s; top: -160px; }
.tripping:hover .avision { left: -155px; }
.avision a {color: #a33a35 !important; display: block; background: rgba(255,255,255,0.5); padding-top: 2px; padding-left: 5px; padding-bottom: 5px; text-transform: uppercase; margin-bottom: -20px; margin-top: 15px; transition: 0.5s ease-out 0.1s;}
.avision a:hover {color: #fff !important; background: rgba(84,69,50,0.8); padding-left: 40%;}
</style>
<div class="tripping">
<div style="width: 500px; height: 600px; background-image: url(http://savepic.su/4629570.png); border: 15px solid #544532;"><div class="for"><div class="wrong">
<table style="width: auto"><tr><td style="line-height:10px; text-align: center; font-style: italic"><b><big>придержанные внешности</big></b></td><td style="line-height:10px; text-align: center; font-style: italic"><b><big>придержанные роли</big></b></td></tr>
<tr><td>
<b>до 17.01</b><br>
<i>Emma Watson</i> за Andrea Boyd<br>
<i>Travis Fimmel и Katheryn Winnick</i> за Кларк и Оливером<br>
<b>до 17.01</b><br>
<i> Dylan O'Brien</i> за Кларк<br>
<b>20.01</b><br>
<i>Tatiana Maslany</i> за Greer<br>
<b>05.02</b><br>
[i]Vin Diesel [/i]за rover
</td>
<td><b>до 20.01</b><br>
<i>ж, стая, стрелок, снайпер</i> за Greer<br>
<b>до 05.02</b><br>
<i>лидер сопротивления</i> за rover<br>
</td></tr></table>
</div></div><div class="having"><b><big>L.A.T.E. - Life After The End</big></b><br><br>
<b>Тематика:</b> постапокалипсис<br>
<b>Рейтинг:</b> NC-21<br>
<b>Систем игры:</b> Эпизоды<br><br></div>
<div class="avision">Мы рады приветствовать вас на нашем проекте!<br>
Для вашего удобства, мы расположили здесь ссылки быстрой навигации.<br>
<a href="http://late.rusff.me/viewtopic.php?id=5" target="_blank">нужные</a><br>
<a href="http://late.rusff.me/viewtopic.php?id=6" target="_blank">хочу к вам</a><br>
<a href="http://late.rusff.me/viewtopic.php?id=3" target="_blank">внешности</a><br>
<a href="http://late.rusff.me/viewtopic.php?id=13" target="_blank">имена</a><br>
<a href="http://late.rusff.me/viewtopic.php?id=4" target="_blank">список ролей</a><br>
<a href="http://late.rusff.me/viewtopic.php?id=11" target="_blank">группировки</a><br>
<a href="http://late.rusff.me/viewtopic.php?id=7" target="_blank">правила</a><br>
<a href="http://late.rusff.me/viewtopic.php?id=12" target="_blank">faq</a><br>
</div></div></div>
</center>За исходный код спасибо RUDOLPH.
Придержать внешность:
[code]<i>имя фамилия внешности на английском</i> за ник придержавшего<br>[/code]
Придержать роль:
[code]<i>роль</i> за ник придержавшего<br>[/code]
