Код:
<!--HTML--><div class="post-box" style= "margin-top: -65px; margin-left: -10px">
            <div id="p7-content" class="post-content">
            <div class="htmldemo"><center></div>
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,700|Montserrat:400|Muli:400|Raleway:200,800,900" rel="stylesheet" type="text/css">

<style>
.kart1 {
  position: relative;
  display:inline-block;
  padding: 1px 0px;
line-height: 140%;
}
.kart1 span {
   display:none;
}
.kart1:hover span {
   position:absolute;
   padding:0px;
   margin-bottom:5px!important;
border-radius: 10px;
   padding:6px 5px 3px 5px;
   display:inline-block;
   margin-top:-180px;
   z-index:100000;
}
.overlay1 {left: 200;display: none;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.65);}
/* стили модального окна */
.popup1 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px;
/* фиксированное позиционирование*/
padding: 100px; top:30px;
/* внешняя тень */
-webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;}
/* активируем модальный блок */
.overlay1:target+.popup1 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);}
/* формируем кнопку закрытия */
.close1 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;}
.close1:hover  {color: #2d9c85;  text-decoration: none;  }




.kart2 {
  position: relative;
  display:inline-block;
  padding: 1px 0px;
line-height: 140%;}
.kart2 span {
   display:none;}
.kart2:hover span {
   position:absolute;
   padding:0px;
   margin-bottom:5px!important;
border-radius: 10px;
   padding:6px 5px 3px 5px;
   display:inline-block;
   margin-top:-180px;
   z-index:100000;}
.overlay2 {left: 100;display: none;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.65);}
/* стили модального окна */
.popup2 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px;
/* фиксированное позиционирование*/
padding: 100px; top:-320px; left: -95px;
/* внешняя тень */
-webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;}
/* активируем модальный блок */
.overlay2:target+.popup2 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);}
/* формируем кнопку закрытия */
.close2 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;}
.close2:hover  {color: #2d9c85;  text-decoration: none;  }

.kart3 {
  position: relative;
  display:inline-block;
  padding: 1px 0px;
line-height: 140%;}
.kart3 span {
   display:none;}
.kart3:hover span {
   position:absolute;
   padding:0px;
   margin-bottom:5px!important;
border-radius: 10px;
   padding:6px 5px 3px 5px;
   display:inline-block;
   margin-top:-180px;
   z-index:100000;}
.overlay3 {left: 100;display: none;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.65);}
/* стили модального окна */
.popup3 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px;
/* фиксированное позиционирование*/
padding: 100px; top:-420px; left: -115px;
/* внешняя тень */
-webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;}
/* активируем модальный блок */
.overlay3:target+.popup3 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);}
/* формируем кнопку закрытия */
.close3 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;}
.close3:hover  {color: #2d9c85;  text-decoration: none;  }


.kart4 {
  position: relative;
  display:inline-block;
  padding: 1px 0px;
line-height: 140%;}
.kart4 span {
   display:none;}
.kart4:hover span {
   position:absolute;
   padding:0px;
   margin-bottom:5px!important;
border-radius: 10px;
   padding:6px 5px 3px 5px;
   display:inline-block;
   margin-top:-180px;
   z-index:100000;}
.overlay4 {left: 100;display: none;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.65);}
/* стили модального окна */
.popup4 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px;
/* фиксированное позиционирование*/
padding: 100px; top:-820px; left: -20px;
/* внешняя тень */
-webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;}
/* активируем модальный блок */
.overlay4:target+.popup4 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);}
/* формируем кнопку закрытия */
.close4 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;}
.close4:hover  {color: #2d9c85;  text-decoration: none;  }



.kart5 {
  position: relative;
  display:inline-block;
  padding: 1px 0px;
line-height: 140%;}
.kart5 span {
   display:none;}
.kart5:hover span {
   position:absolute;
   padding:0px;
   margin-bottom:5px!important;
border-radius: 10px;
   padding:6px 5px 3px 5px;
   display:inline-block;
   margin-top:-180px;
   z-index:100000;}
.overlay5 {left: 100;display: none;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.65);}
/* стили модального окна */
.popup5 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px;
/* фиксированное позиционирование*/
padding: 100px; top:-720px; left: -20px;
/* внешняя тень */
-webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;}
/* активируем модальный блок */
.overlay5:target+.popup5 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);}
/* формируем кнопку закрытия */
.close5 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;}
.close5:hover  {color: #2d9c85;  text-decoration: none;  }



</style>

<div style="background-image:url(http://funkyimg.com/i/2nSUV.png); width:580px; height: 536px;">


<a href="#win1" style= "position: absolute; margin-top: 232px; margin-left: 506px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a>
<a href="#x" class="overlay1" id="win1"></a>
    <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px">
<div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div>
<div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;">
       <span style="font-size: 9px; font-family: 'Roboto', sans-serif;
 color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div>
        <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div>

<a href="#win1" style= "position: absolute; margin-top: 132px; margin-left: 506px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a>
<a href="#x" class="overlay1" id="win2"></a>
    <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px">
<div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div>
<div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;">
       <span style="font-size: 9px; font-family: 'Roboto', sans-serif;
 color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div>
        <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div>


<a href="#win1" style= "position: absolute; margin-top: -256px; margin-left: 536px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a>
<a href="#x" class="overlay1" id="win2"></a>
    <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px">
<div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div>
<div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;">
       <span style="font-size: 9px; font-family: 'Roboto', sans-serif;
 color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div>
        <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div>


<a href="#win1" style= "position: absolute; margin-top: -456px; margin-left: 336px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a>
<a href="#x" class="overlay1" id="win2"></a>
    <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px">
<div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div>
<div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;">
       <span style="font-size: 9px; font-family: 'Roboto', sans-serif;
 color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div>
        <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div>


<a href="#win1" style= "position: absolute; margin-top: -656px; margin-left: 386px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a>
<a href="#x" class="overlay1" id="win2"></a>
    <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px">
<div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div>
<div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;">
       <span style="font-size: 9px; font-family: 'Roboto', sans-serif;
 color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div>
<div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div>
        <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div>


            </div>
            
        	</div>