Опиум 20 декабря в 15:12 :
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;

}

/* ïîäêëàäêà ïîä âðàùàþùóþñÿ ÷àñòü */
.ch-info-wrap{
    position: absolute;
    width: 300px;
    top: -0px;
    left: -27px;
    height: 180px;
    border-radius: 20%;
 
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;

background: rgb(36, 26, 25, 0.2);
}

/* âíóòðåííÿÿ âðàùàþùàÿñÿ ÷àñòü, ïîçèöèîíèðóåòñÿ îòíîñèòåëüíî ïîäëîæêè */
.ch-info{
position: absolute;
    width: 300px;
    height: 180px;
    border-radius: 20%;
 
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
   
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.ch-info > div {
display: block;
    position: abs

Опиум 20 декабря в 15:12 :
olute;
    width: 100%;
    height: 100%;
    border-radius: 20%;
    background-position: center center;
 
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

.ch-info .ch-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);

    background: #BBAFA5;
    opacity: 0.5;
}

.ch-img-1 {
background-image: url(https://forumstatic.ru/files/0012/04/67/25302.jpg);
}

.ch-img-2 {
background-image: url(https://forumstatic.ru/files/0012/04/67/19968.jpg);
}

.ch-img-3 {
background-image: url(https://forumstatic.ru/files/0012/04/67/63941.jpg);
}

.ch-img-4 {
background-image: url(https://forumstatic.ru/files/0012/04/67/50790.jpg);
}

.ch-img-5 {
background-image: url(https://forumstatic.ru/files/0012/04/67/34808.jpg);
}

.ch-img-6 {
background-image: url(https://forumstatic.ru/files/0012/04/67/18827.jpg);
}

.ch-img-7 {
background-image:

Опиум 20 декабря в 15:12 :
url(https://forumstatic.ru/files/0012/04/67/44027.jpg);
}

.ch-img-8 {
background-image: url(https://forumstatic.ru/files/0012/04/67/98448.jpg);
}

.ch-img-9 {
background-image: url(https://forumstatic.ru/files/0012/04/67/98179.jpg);
}

.ch-img-10 {
background-image: url(https://forumstatic.ru/files/0012/04/67/60869.jpg);
}

/* àïä 2 ïî êàðòèíêàì*/
.ch-img-11 {
background-image: url(https://forumstatic.ru/files/0012/04/67/44699.jpg);
}

.ch-img-12 {
background-image: url(https://forumstatic.ru/files/0012/04/67/13982.jpg);
}

.ch-img-13 {
background-image: url(https://forumstatic.ru/files/0012/04/67/62114.jpg);
}

.ch-img-14 {
background-image: url(https://forumstatic.ru/files/0012/04/67/11739.jpg);
}

.ch-img-15 {
background-image: url(https://forumstatic.ru/files/0012/04/67/55963.jpg);
}

.ch-img-16 {
background-image: url(https://forumstatic.ru/files/0012/04/67/77697.jpg);
}

.ch-img-17 {
background-image: url(https://forumstatic.ru/files/0012/04/67/62750.jpg);
}

.ch-img-18 {
background-image: url(https://forumstatic.ru/files/0012/04/67/45224.jpg);
}

.ch-img-19 {
backgr

Опиум 20 декабря в 15:12 :
ign: center;
    width: 205px!important;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

.ch-info h6 {
color: #baa6e0;
font-size: 11px;
margin:5px 0px 0px 20px;
line-height:11px;
font-weight:normal!important;
font-style:italic;
font-family: Georgia;
width:185px!important;
}

.ch-info h7 {
color: #baa6e0;
font-size: 12px;
margin-bottom:0px!important;
margin-top:55px!important;
margin-left:0px!important;
margin-right:0px!important;
font-style:italic;
font-family: Georgia;
width:185px!important;
text-align:justify;
}

.ch-item:hover .ch-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}

Опиум 20 декабря в 15:12 :
ound-image: url(https://forumstatic.ru/files/0012/04/67/51955.jpg);
}

.ch-img-20 {
background-image: url(https://forumstatic.ru/files/0012/04/67/41064.jpg);
}

.ch-img-21 {
background-image: url(https://forumstatic.ru/files/0014/ef/e4/26607.jpg);
}

.ch-img-22 {
background-image: url(https://forumstatic.ru/files/0012/04/67/94996.jpg);
}

/* êîòèêè!*/
.ch-img-23 {
background-image: url(https://forumstatic.ru/files/0012/04/67/86171.jpg);
}

/*îãîí¸÷åê!*/
.ch-img-24 {
background-image: url(https://forumstatic.ru/files/0012/04/67/44227.gif);
}

.ch-img-25 {
background-image: url(http://i004.radikal.ru/1510/e1/5abf84e5a698.jpg);
}

.ch-info a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: Arial, sans-serif;
}

.ch-info a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}

.ch-info h5 {
    color: #251B1A;
    font-size: 12px;
    margin: 55px 0px 0px 45px;
    font-weight: normal;
    font-style: italic;
    font-family: Georgia;
    text-al

Опиум 20 декабря в 15:15 :
вторая   часть с ткестом ставится   в  объяву у меня 

Опиум 20 декабря в 15:15 :
<div class='rotat'>
<div id="КонтентРотатор2" style="width:225px;">
<!-- Ротатор произвольного контента -->

<ul>
<div class="ch-item ch-img-1" style="z-index:100;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back" >
<h5>Зелёная улица в <b>Римском квартале</b>. Тщательно опекаемая городская достопримечательность.</h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-2" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-back" >
<h5>Старая, но всё ещё жилая типовая многоэтажка в трущобах <b>Лондонского квартала</b>.</h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-4" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-4"></div>
<div class="ch-info-back">
<h5>Уютная улочка в <b>Римском квартале</b>: кафе и выставленные у домов кадки с растениями.</h5>
</div></div></div>

Опиум 20 декабря в 15:15 :
</div>
</ul>

<ul>
<div class="ch-item ch-img-6" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-6"></div>
<div class="ch-info-back">
<h5>Ночной вид на береговую линию <b>Римско-Парижского квартала</b>.</h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-10" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-10"></div>
<div class="ch-info-back">
<h5>Ворота на старое кладбище, ныне парк Честертон в <b>Старом Лондоне</b>, сохранившееся со времён основания поселения. </h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-10" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-10"></div>
<div class="ch-info-back">
<h5> Ворота на старое кладбище, ныне парк Честертон в <b>Старом Лондоне</b>, сохранившееся со времён основания поселения. </h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-11" style=

Опиум 20 декабря в 15:15 :
e="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-17"></div>
<div class="ch-info-back">
<h5>Капелла св. Афрония, парк Саутгэмптон, <b>Лондонский квартал</b>. Памятник деметрианского нео-католичества. 428 лет.</h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-18" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-18"></div>
<div class="ch-info-back">
<h5>Одна из сохранившихся статуй, что украшает вход в фамильный склеп. 290 лет. Кладбище Честертон, <b>Лондон.</b> </h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-19" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-19"></div>
<div class="ch-info-back">
<h5>"Охраняющий лев", скульптура, вырезанная внутри каменного монолита. Находится посреди искусственного озера Зеркальное в Баденском парке, что в <b>Южном Берлине</b>. </h5>
</div></div></div></div>
</ul>

<ul>

Опиум 20 декабря в 15:15 :
<div class="ch-item ch-img-20" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-20"></div>
<div class="ch-info-back">
<h5>Алый чайный домик в окружении редчайших японских красных кленов. Парк им. Каору Авасимы, этнографа и историка-япониста. <b>Берлин.</b></h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-21" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-21"></div>
<div class="ch-info-back">
<h5>Набережная Анри Бенуа и Мост тысячи лепестков. Назван так, потому что соединяет набережную с садом, растения в котором цветут большую часть года. <br><b>Северный Париж</b>. </h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-22" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-22"></div>
<div class="ch-info-back">
<h5>Рукотворный водопад в <b>Арденском лесу</b>. Высота — 26 метров, создан по проекту-победителю обще

Опиум 20 декабря в 15:15 : <ul>
<div class="ch-item ch-img-14" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-14"></div>
<div class="ch-info-back">
<h5>Типичная этническая забегаловка "для своих" в одном из японских уголков <b>Берлинского квартала</b>.</h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-15" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-15"></div>
<div class="ch-info-back">
<h5>Маяк Аберли на мысе Корлеоне в <b>Римско-Парижском квартале</b>. Действующий исторический памятник, охраняется государством. Возраст 374 года.</h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-16" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-16"></div>
<div class="ch-info-back">
<h5>Терассовые виноградники в южной части <b>Римско-Парижского квартала.</b></h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-17" styl

Опиум 20 декабря в 15:15 :
"z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-11"></div>
<div class="ch-info-back">
<h5>Мост Змееносца, ведущий от <b>Римско-Парижского квартала</b> к промысловому городу-сателлиту, что располагается на одном из островов Малого барьерного рифа. </h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-12" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-12"></div>
<div class="ch-info-back">
<h5>Мост Фейри в <b>Лондонском квартале</b>. Подсвеченные "крылья" из льющейся воды меняют уровень, имитируя плавные взмахи на разных секциях моста.</h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-13" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-13"></div>
<div class="ch-info-back">
<h5>Традиционные кондо — многоквартирные дома без общего подъезда, в которых живут японцы. <b>Берлин</b>.</h5>
</div></div></div></div>
</ul>

Опиум 20 декабря в 15:15 :
городского экологического конкурса. </h5>
</div></div></div></div>
</ul>

<ul>
<div class="ch-item ch-img-23" style="z-index:120;height:180px;width:180px;background:transparent;">   
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-23"></div>
<div class="ch-info-back">
<h5><b>Котики!</b><br>Мяу! Тебе попались счастливые пушистые котики: улыбнись, добро и удача сегодня с тобой! =)</h5>
</div></div></div></div>
</ul>

</div>

    <script language="javascript">
    var sek = 10000000;  // Время отображения

    var Nrout=$("#КонтентРотатор2>ul").length
    var i=Math.round(Math.random()*(Nrout-1));RotatorMycontent2(i);
    function RotatorMycontent2(i) {
    $("#КонтентРотатор2>ul").hide();
    $("#КонтентРотатор2>ul").eq(i).show();
    j =Math.round(Math.random()*(Nrout-1));
    timerID = setTimeout("RotatorMycontent2(j)",sek);}
    </script>
</div>

Опиум 20 декабря в 15:15 :
и в  нтмл верх  <!--  Для Вращалка -->
    <style>#КонтентРотатор2>ul{display:none}</style>
как  бы  если разобраться  то прикольно

<!--табла 1-->
<div style="font-size: 11px; color: #7d776b; position: absolute; margin-top: 100px; margin-left: -10px; width: 320px; line-height: 0,6em !important; ">
<a href="http://curseofthepast.rusff.me/profile.php?id=4"><font style="font-size: 10pt; color: #3c1407; font-family: Times New Roman;"> <b>√ SUMMER</b></font></a>&nbsp;&nbsp;|
<a href="http://curseofthepast.rusff.me/profile.php?id=3"><font style="font-size: 10pt; color: #3c1407; font-family: Times New Roman;"> <b>√ ELENA</b></font></a>&nbsp;&nbsp;|
<a href="http://curseofthepast.rusff.me/profile.php?id=10"><font style="font-size: 10pt; color: #3c1407; font-family: Times New Roman;"> <b>√ CAROLINE</b></font></a><br><br>
<justify><font style="font: 11px Arial !important;">
<b>Гость</b>, если тебе уже врубили отопление, но ты все еще мерзнешь от одиночества и нехватки обнимина в крови, приходи к нам! Это форум по "Дневникам вампира", и здесь можно устраивать грязные танцы с волками, есть ведьминские грибы и делать селфи на фоне кладбища.<br>
…Отговорила роща золотая, но ты же еще можешь всем сказать, как журавли, печально улетая, просили здесь по полной зажигать.</font>
</justify></div>

<!--табла 2 ams-->
<div style="font-size: 12px; color: #7d776b; position: absolute; margin-top: 100px; margin-left: 350px; width: 240px; line-height: 0,6em !important; ">
<center><font style="font: 12px Arial !important;">НОВОСТИ</font>
</center></div>

<!--табла 2-->
<div style="font-size: 11px; color: #7d776b; position: absolute; margin-top: 110px; margin-left: 300px; width: 280px; line-height: 0,6em !important; ">
<center>
<img border="0" title="0"src="https://lh5.googleusercontent.com/-bUdtFu-
snmA/VJOh15nTObI/AAAAAAAADIA/_ySRSLqWR6E/w32-h21-no/2.gif"> <a href="http://curseofthepast.rusff.me/viewtopic.php?id=1054#p130878"><font style="font-size:10pt; color: #3c1407; font-family: Times New Roman;"> <b>Поздравляшки для Сайлара!</b></font></a><br>
<img border="0" title="0"src="https://lh5.googleusercontent.com/-bUdtFu-
snmA/VJOh15nTObI/AAAAAAAADIA/_ySRSLqWR6E/w32-h21-no/2.gif"> <a href="http://curseofthepast.rusff.me/viewtopic.php?id=1051#p130756"><font style="font-size:10pt; color: #3c1407; font-family: Times New Roman;"> <b>ВЕСЕЛЫЕ старты!</b></font></a><br></center></div>

<!--табла 2.1-->
<div style="font-size: 11px; color: #7d776b; position: absolute; margin-top: 200px; margin-left: 330px; width: 280px; line-height: 0,6em !important; ">
<center>
<a href="http://curseofthepast.rusff.me/profile.php?id=289"><img src="http://savepic.su/6859818.png" class="Hoverbuttons"  title="синие" style="width:40px; height: 40px; border-radius: 0px 0px 0px 0px"></a>
<font style="font: 11px Times New Roman !important;">22</font>
<a href="http://curseofthepast.rusff.me/profile.php?id=289"><img src="http://savepic.su/6859818.png" class="Hoverbuttons"  title="синие" style="width:40px; height: 40px; border-radius: 0px 0px 0px 0px;"></a>
<font style="font: 11px Times New Roman !important;">22</font>
<a href="http://curseofthepast.rusff.me/profile.php?id=289"><img src="http://savepic.su/6859818.png" class="Hoverbuttons"  title="синие" style="width:40px; height: 40px; border-radius: 0px 0px 0px 0px;"></a>
<font style="font: 11px Times New Roman !important;">22</font>
<a href="http://curseofthepast.rusff.me/profile.php?id=289"><img src="http://savepic.su/6859818.png" class="Hoverbuttons"  title="синие" style="width:40px; height: 40px; border-radius: 0px 0px 0px 0px;"></a>
<font style="font: 11px Times New Roman !important;">22</font></center></div>
<!--табла 2.1.1-->
<div style="font-size: 11px; color: #7d776b; position: absolute; margin-top: 200px; margin-left: 330px; width: 280px; line-height: 0,6em !important; ">
<center> </center></div>

<!--табла 3&4-->
<div style="font-size: 12px; color: #7d776b; position: absolute; margin-top: 100px; margin-left: 630px; width: 240px; line-height: 0,6em !important; ">
<center><font style="font: 12px Arial !important;">ОЧЕРЕДНОСТЬ ПОСТОВ </font>
</center></div>

<!--табла 3-->
<div style="font-size: 11px; color: #7d776b; position: absolute; margin-top: 110px; margin-left: 630px; width: 120px; line-height: 0,6em !important; ">
<justify><font style="font: 11px Arial !important;">
<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=891">04.01</a> - D. Salvatore<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=889">04.02</a> - Silas<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=899">04.03</a> - Amara<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=900">04.04</a> - C. Forbes<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=911">04.05</a> - K. Pierce<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=1006"> 04.02</a> - N. Thorndike<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=1010"> 04.03</a> - St. Cole
</font>
</justify></div>

<!--табла 4-->
<div style="font-size: 11px; color: #7d776b; position: absolute; margin-top: 110px; margin-left: 765px; width: 120px; line-height: 0,6em !important; ">
<justify><font style="font: 11px Arial !important;">
<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=975">04.01</a> - S. Price<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=977">04.02</a> - Br. Cole<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=978">04.03</a> - D. Newman<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=976">04.04</a> - Mia<br>
<a href="http://curseofthepast.rusff.me/viewtopic.php?id=979">04.05</a> - S. Price
</font>
</justify></div>