Код:

<!--HTML-->
<style>.htmldemo {display:none;}</style>
<!--Коды к Cлайдеру-->
<!-- MA5 Slider -->
<link href="http://forumstatic.ru/files/0019/9e/ef/98009.css" rel="stylesheet" type="text/css">
<script src="http://forumstatic.ru/files/0019/9e/ef/50732.js"></script>

<!-- Коды к слайдеру -->
     <script>
        var first = 0
        function sl_1111(){
            if(first)return false;
            ++first;
            setTimeout(function() {$('.ma5slider').ma5slider();},3130);
       }
    </script>
<style type="text/css">
/*Slider up styles*/
#sample-1 {width:684px;margin:104px auto 40px auto;}
.outside-navs .nav--next, .outside-navs .nav--prev {color: #FFF; font: normal normal 700 45px/80px  'Arial Black';text-shadow:0 0 1px #000;}
.outside-dots .dots > .dot {background-color: #F0F0F0;}
sample-1 .slides>a>span{
   display:inline-block;
   position:relative;
   overflow:hidden;
   overflow-y:auto;
}
.ma5slider .slide>span>.text{
  position:absolute;z-index:1;
  max-width:100%;
  top:0;left:0;right:0;bottom:0;
  height:auto;
  max-height:99%;
  padding:7px;
  text-align: center;
  text-shadow:none;
  color:#616161!important;
  background-color:#e6e5e5; 
  box-shadow: 1px 1px 8px #7d7d7d inset;/*Фон под текстом */
  font: normal normal 400 10.5px/normal  Verdana;/* Шрифт на всплывающем тексте в слайдере*/
  overflow:hidden;
  overflow-y:auto;
  opacity:0;
  transition:1s;
}
.ma5slider .slide:hover>span>.text{
  opacity:1;
  transition:1.5s;
}
</style><!--//End Коды к Cлайдеру-->



<!-- Коды к контейнерам кнопок -->
<style>
@import url(http://forumstatic.ru/files/000f/09/5e/31963.css); /*бебаси р*/
div.content {
  position:absolute;
  box-sizing:border-box;
  padding:11px!important;
  visibility:hidden;
  text-align: justify;/*center;*/
  background: url("http://sd.uploads.ru/3KUW1.png")  center -29px no-repeat!important;
  font: normal normal 400 11px/normal  bebasneueregular;
  color: #464E58;
  height: 368px;
  width: 726px;
  top:-74px;
  left: 60px;
  opacity:0;
   transition: 0.6s;
}
div.content.active {
  /*outline:red solid 1px;*/
  z-index:1000;
  visibility:visible;
  opacity:1;
  left: 60px;
  top:-4px;
  transition: 2.8s;
}
.cover-this {
  top:-142px;
  left:-65px;
  width:973px;
  height:636px;
  position:absolute;
  background:rgba(0,0,0,.0);
  visibility:hidden;
  z-index:0;
  /*outline:red solid 1px;*/
  transition: .9s;
}
.cover-this.active {
  background:rgba(0,0,0,.54);
  visibility:visible;
  z-index:90;
  transition: 1.8s;
}
.content b.close{
  opacity:.87;
  text-align:center;padding-left:0px;
  display:block!important;
  position:absolute;
  cursor:pointer;
  font: normal normal 700 20px/21px istok!important;
  text-shadow:1px 1px 1px #000;
  top:-14px!important;;right:-14px!important;
  width:30px;
  height:30px;
  color:transparent!important;
  background:url(http://forumstatic.ru/files/0014/cc/0a/88226.png) center no-repeat;
  background-size:100% auto;
  border-radius:50%;
}
</style>

<!-- Подложка-кликалка-закрывалка под контентом-->
<div class="cover-this"></div>

<!-- Контейнеры - всплывалки(от клика кнопок) с нужным Контентом -->

<div class="P1 content"><!-- Тут контент -->
<div class="putext"><div class="samtext" style="width: 659px; height: 34px; margin-top: 15px;">Лос-Анджелес — важный центр высшего и среднего специального образования США. Такие дела. У себя в брошюрке можешь глянуть список самых известных университетов и училищ, но если лень что-то там раскрывать и искать, я их и наизусть помню:</div>
<!-- Cлайдер в первом контейнере -->

    <div id="sample-1" class="ma5slider outside-navs outside-dots anim-horizontal loop-mode">
        <div class="slides">

            <a href="#slide-1"><span><img src="http://sh.uploads.ru/I6uyD.png" alt="">
<!-- Всплывающий текст -->
<div class="text" style="position:absolute;z-index:1;  margin:auto 0!important;">
<div class="beatypu">Калифорнийский университет в Лос-Анджелесе</div><br>
Государственный исследовательский университет, расположенный в городе Лос-Анджелес в штате Калифорния, США. Вошёл в систему государственных университетов в 1919 году, став вторым кампусом общего назначения в системе Калифорнийского университета. Факультеты здесь называются школами и колледжами: колледж литературы и наук, школы искусств и архитектуры, инжиниринга и прикладных наук, медсестринства, театра, кино и телевидения. Всего около 300 специальностей.<br><br>
<div class="beatypu">для жителей Калифорнии — около $34 тысяч<br>
для не резидентов — около $59 тысяч</div><br>
</div>
</span></a>

            <a href="#slide-2"><span><img src="http://sg.uploads.ru/REp9u.png" alt="">
<!-- Всплывающий текст -->
<div class="text" style="position:absolute;z-index:1;  margin:auto 0!important;">
<div class="beatypu">California Institute of the Arts </div><br>
 CalArts - частное некоммерческое высшее учебное заведение в США. CalArts был учреждён в 1961 году. Университетский кампус находится в пределах Валенсии. <br>
ля зачисления в учебное заведение абитуриент должен предоставить информацию о предыдущей успеваемости. При этом при поступлении достаточно не высокий конкурс, где на одно место претендуют не более 3 абитуриентов. Как и во многих университетах США академический год состоит из двух семестров. Несмотря на недешёвое образование в calarts, студенты университета могут претендовать на финансовую помощь со стороны учебного заведения.<br>
Стоимость обучения в магистратуре и бакалавриате за год составляет (как для жителей Калифорнии, так и для нерезидентов):<br>
<div class="beatypu">Бакалавриат - $20 тысяч<br>
Магистратура    $20 тысяч</div><br>
</div>
</span></a>

            <a href="#slide-3"><span><img src="http://s5.uploads.ru/o8ptF.png" alt="">
<!-- Всплывающий текст -->
<div class="text" style="position:absolute;z-index:1;  margin:auto 0!important;">
<div class="beatypu">Американский киноинститут</div><br>
независимая некоммерческая культурная организация, созданная Национальным фондом искусств в 1967 году. При нем открыта школа кино AFI Conservatory, которая была признана лучшей в мире по версии журнала The Hollywood Reporter. Она может похвастаться такими выпускниками, как Даррен Аронофски, Пэтти Дженкинс, Януш Камински, Мэттью Либатик, Дэвид Линч, Терренс Малик, Уолли Пфистер, Роберт Ричардсон, Эдвард Цвик и другие. AFI Conservatory предлагает двухлетнюю программу с получением степени Master of Fine Arts в одной из шести дисциплин: кинематография, режиссура, монтаж, продюсирование, художественная постановка и сценарное мастерство. <br>
Каждый год в институт поступают сотни заявок, но отбирают лишь около 150 человек. Для начала нужно подать онлайн-заявку и оплатить регистрационный взнос ($85). Далее потребуются небольшой рассказ о себе, резюме, содержащее сведения об образовании и опыте работы, рекомендационные письма и документы об окончании колледжа или университета. Иностранным студентам нужно подтвердить свое знание английского языка. Помимо базовых есть дополнительные требования ― примеры работ в соответствии с дисциплиной. Зато талантливым студентам институт предоставляет финансовую поддержку и стипендии.<br><br>
Стоимость обучения в магистратуре и бакалавриате за год составляет (как для жителей Калифорнии, так и для нерезидентов):
<div class="beatypu">Первый год ― около $4 тысяч; второй год ― около $58 тысяч.</div>
</div></span></a>

            <a href="#slide-4"><span><img src="http://sh.uploads.ru/3Ebhn.png" onload="sl_1111()"  alt="">
<!-- Всплывающий текст -->
<div class="text" style="position:absolute;z-index:1;  margin:auto 0!important;">
<div class="beatypu">Калифорнийский технологический институт</div><br>
Университет является одним из наиболее финансируемых в мире по расчету на одного студента – численностью примерно в 2000 студентов, Калтех получает 2 млрд. долларов финансирования. Текущие исследования, особенно в области космологии, издавна являются одним из приоритетных направлений деятельности университета. Калтех тесно сотрудничает с NASA, запуская большую часть их космических аппаратов.
Девиз университета «The truth shall make you free» формирует кодекс чести, который является одним из наиболее влиятельных аспектов на жизнь студентов. Моральная сторона обучения отслуживается не только студентами и профессорами, но и также специальными бюро по расследованию инцидентов. Неуклонное следование своему девизу делает обучение менее напряженным. Даже контрольные и экзаменационные работы зачастую выдаются студентам на дом, таким образом итоговый балл большей частью лежит на совести студента, нежели профессора.<br>
Форма обучения в университете значительно отличается от традиционного соперничества американских студентов – политика Калтеха поощряет совместную работу и выполнение домашних заданий, таким образом стимулируя сотрудничество еще на уровне студентов.<br>
Для наиболее комфортного перехода студентов от школы к режиму университета, в первый год обучения оценки не проставляются, а вся система аттестации разделена на зачет/незачет. Тем не менее, выставляются теневые оценки, которые позволяют студентам отслеживать их успехи и видеть свои минусы.<br>
<br>
Факультеты.<br>
Биология, химия и химические технологии, технологии и прикладная наука, геология и планетология, гуманитарные и общественные науки, физика, математика и астрономия.<br>
<br>
Стоимость обучения в магистратуре и бакалавриате за год составляет (как для жителей Калифорнии, так и для нерезидентов):<br>
<div class="beatypu">Бакалавриат $49 тысяч<br>
Магистратура $49 тысяч</div><br>
</div></span></a>

<a href="#slide-5"><span><img src="http://s3.uploads.ru/4GyZN.png" onload="sl_1111()"  alt="">
<!-- Всплывающий текст -->
<div class="text" style="position:absolute;z-index:1;  margin:auto 0!important;">
<div class="beatypu">Отисовский колледж искусства и дизайна</div><br>
Больше 80 лет частный колледж в Пасадене готовит профессиональных дизайнеров и художников самых разных направлений: графический и промышленный дизайн, дизайн транспортных средств, экодизайн. Кроме того, здесь обучают основам рекламы, телевидения и кинематографии.<br>
<br>
Колледж расположен в двух кампусах в Пасадене: Hillside Campus и South Campus. Первый находится в лесистой местности. Hillside Campus оснащен всем необходимым для обучения: техническими приспособлениями, инструментами, студиями, компьютерными и фотолабораториями. Один из главных ресурсов ― Мемориальная библиотека Джеймса Лемона Фогга с огромным собранием художественных и методических материалов. Здесь же находится Williamson Gallery, где проходят выставки известных фотографов, художников и архитекторов, а также расположены две галереи с работами студентов. В университетском кафе студенты и преподаватели не только едят, но и учатся, общаются и обсуждают насущные вопросы.<br>
<br>
South Campus расположился в бывшей испытательной авиационной лаборатории. Его фишка ― галерея в аэродинамической трубе (здесь проводят арт-мероприятия и конференции). Для учащихся предусмотрены выставочные пространства, индивидуальные студии, а также двор для скульптур.<br>
<br>
Между кампусами налажено транспортное сообщение.<br>
<br>
Стоимость обучения в магистратуре и бакалавриате за год составляет (как для жителей Калифорнии, так и для нерезидентов):<br>
<div class="beatypu">Бакалавриат  -  $19 тысяч <br>
Магистратура    $19 тысяч</div> <br>

</div></span></a>



    </div> 
 </div><!--//End Cлайдер-->
 </div>
<div class="nazvstr1" style="margin-top: -14px; margin-left: 232px;">А ДИПЛОМ ДЛЯ МАМЫ</div> <b class="close"></b></div>
 <b class="close"></b></div>
<div class="P2 content"><!-- Тут контент -->
<div class="putext"><div class="samtext">Немножко пресной информации, да. Всеми любимый город ангелов был основан в далёком 1781 году, и с тех пор успел разрастись до невероятных размеров. Знаешь ли ты, друг, что ЛА - крупнейший город в своём штате (солнечная Калифорния) и второй по величине в стране?  Сегодня Лос-Анджелес является одним из крупнейших мировых культурных, экономических, научных и образовательных центров. Что ещё я могу тебе рассказать? Люди с превеликим удовольствием ненавидят ЛА. Говорил кому-нибудь, что едешь сюда? Говорил, по глазам вижу. Сказал это друзьям там или родственникам, а тебе в ответ шквал всякого треша вроде: “О боже, там же такие фальшивые люди!” или “Но там же невыносимое движение!” Но эй, мир, сколько лет прошло! Жить тут, конечно, дешевле со временем не стало, но тем не менее, все мы в душе нежно любим этот город. Добро пожаловать!</div><br><br><br><br><br><br><br>
<img src= "http://sh.uploads.ru/OduV5.png"><br>
<img src= "http://sg.uploads.ru/kxOuh.png"><br>
<img src= "http://s9.uploads.ru/z8eoD.png"><br>
<img src= "http://s7.uploads.ru/NHlrJ.png"><br>
<img src= "http://s3.uploads.ru/YzOvD.png"><br>
<img src= "http://s5.uploads.ru/5wRjo.png"><br>
<img src= "http://s5.uploads.ru/2oZ54.png"><br>
<img src= "http://s5.uploads.ru/eLAxJ.png"><br>
<img src= "http://s9.uploads.ru/2XmKa.png"><br></div>
<div class="nazvstr1" style="margin-top: -14px; margin-left: 232px;">КУДА БЫ ЗАСЕЛИТЬСЯ</div> <b class="close"></b></div>
<b class="close"></b></div>

<div class="P3 content"><!-- Тут контент --><div class="putext"><img src= "http://s3.uploads.ru/0HTWV.png"><br>
<img src= "http://s7.uploads.ru/RvLtK.png"><br>
<img src= "http://s9.uploads.ru/awS61.png"><br>
<img src= "http://s7.uploads.ru/M6pqP.png"><br>
<img src= "http://sh.uploads.ru/Qj903.png"><br>
<img src= "http://sd.uploads.ru/nWp8I.png"><br>
<img src= "http://s7.uploads.ru/BPSjo.png"><br>
<img src= "http://s9.uploads.ru/8TLtY.png"><br>
<img src= "http://s5.uploads.ru/ZYQNI.png"><br>
<img src= "http://s8.uploads.ru/A5kLS.png"><br>
</div> 
<div class="nazvstr1" style="margin-top: -14px; margin-left: 232px;">МНЕ СКУЧНО. ЧТО ДЕЛАТЬ?</div> <b class="close"></b></div>

<div class="P4 content"><!-- Тут контент -->
<div class="putext"><div class="samtext">Вообще-то всё в Лос-Анджелесе (даже пляжи) так и подталкивает к жизни в стиле зож и активным занятиям спортом. Сам я подобным не страдаю, однако это вроде как полезно, наверное даже интересно и вообще, все США на этом двинуты. А если ЛА второй в штатах, то, выходит дело, он и второй по спортивной двинутости, да? <br></div><br><br><br><br><br><br><br>
<img src= "http://s9.uploads.ru/dCkAR.png"><br>
<img src= "http://s7.uploads.ru/F4PG2.png"><br>
<img src= "http://s8.uploads.ru/814wZ.png"><br>
<img src= "http://s3.uploads.ru/ljkBh.png"><br>
</div>
<div class="nazvstr1" style="margin-top: -14px; margin-left: 182px;">КАКОЙ ЗОЖ? Я ЧТО НА ДУРАКА ПОХОЖ?</div> <b class="close"></b></div>

<div class="P5 content"><!-- Тут контент -->
<div class="putext"><img src= "http://sg.uploads.ru/EQOuC.png"><br>
<img src= "http://sh.uploads.ru/6ZfJ7.png"><br>
<img src= "http://s8.uploads.ru/x5J93.png"><br>
<img src= "http://sd.uploads.ru/pkSwl.png"><br>
<img src= "http://sh.uploads.ru/fDUaS.png"><br>
<img src= "http://s9.uploads.ru/kSnT7.png"><br>
<img src= "http://s8.uploads.ru/Ch5Mv.png"><br>
<img src= "http://s7.uploads.ru/zI1lv.png"><br>
<img src= "http://s8.uploads.ru/fniNp.png"><br>
<img src= "http://sg.uploads.ru/vnUCR.png"><br>
</div>
<div class="nazvstr1" style="margin-top: -14px; margin-left: 232px;">ОК, ГУГЛ, ЧЕГО ПОСМОТРЕТЬ?</div> <b class="close"></b></div>


<div class="P6 content"><!-- Тут контент -->
<div class="putext"><img src= "http://s7.uploads.ru/tyIfr.png"><br>
<img src= "http://s9.uploads.ru/aXnkH.png"><br>
<img src= "http://sd.uploads.ru/lqHdS.png"><br>
<img src= "http://s5.uploads.ru/J4UFz.png"><br>
<img src= "http://s8.uploads.ru/6YPvT.png"><br>
<img src= "http://s8.uploads.ru/fgkoi.png"><br>
<img src= "http://sd.uploads.ru/6LknD.png"><br>
<img src= "http://s7.uploads.ru/Kr9vA.png"><br>
<img src= "http://s3.uploads.ru/JyvWm.png"><br>
<img src= "http://sg.uploads.ru/bY29O.png"><br>
<img src= "http://s5.uploads.ru/cRwY0.png"><br>
<img src= "http://s9.uploads.ru/BQZ8Y.png"><br>
<img src= "http://s7.uploads.ru/cYlSm.png"><br>
<img src= "http://s9.uploads.ru/Dx3Sk.png"><br>
<img src= "http://s9.uploads.ru/2Khry.png"><br>
<img src= "http://s5.uploads.ru/bV3H9.png"><br>
<img src= "http://s8.uploads.ru/7TR0X.png"><br>
<img src= "http://sg.uploads.ru/vTbIq.png"><br>
<img src= "http://s9.uploads.ru/SF3yJ.png"><br>
<img src= "http://s5.uploads.ru/8tCxZ.png"><br>
</div>
<div class="nazvstr1" style="margin-top: -14px; margin-left: 232px;">А ТЫ ЗНАЕШЬ, ЧТО....</div> <b class="close"></b></div>
<b class="close"></b></div>

<div class="Ч1 content"><!-- Тут контент --><b class="close"></b></div>

<script type="text/javascript">
var wrp = $('.post-box.work-df');
  wrp.find('.postimg[alt^="P"],.postimg[alt^="Ч"]').click(function(){
     var alt = $(this).attr('alt');
     wrp.find('div.content').not('.'+alt).removeClass('active');
     wrp.find('.cover-this,div.'+alt).addClass('active');
  })
  wrp.find('.cover-this,.content b.close').click(function(){
     wrp.find('div.content,.cover-this').removeClass('active');
  });
$(document).ready(function(){
  setTimeout(function(){$('.htmldemo').show();},1450);
});
</script>