Код:
<!--HTML-->
<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>
.tooltip span{z-index: 1;
visibility: hidden;
position: absolute;
top: -50px; left: -20px;
padding:10px;
border-radius: 10px;
background: #ebebeb none repeat scroll 0% 0%;
border-color: #80a0c8 #9eb6d4 #80a0c8;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-width: 4px 2px;
border-style: solid;
box-shadow: 0px 0px 12px 0px #c6d1df inset;
}
.tooltip:hover span{z-index: 1;
visibility: visible;
}
.pixmaps {color: #666;
font-family: "Roboto Condensed" !important;
font-size: 14px;
font-weight: 800;
font-style: normal;
text-align: center;
text-transform: uppercase;
letter-spacing: 0px;
word-spacing: 0px;}
.pixmaps1 { color: #39486b;
font-size: 11px!important; font-family: "Roboto Condensed" !important; line-height: 90%;}
</style>
<div style="background-image:url(http://funkyimg.com/i/2gwuR.png); width:600px; height: 450px">
<table style="width: 300px; position: absolute; margin-top: 217px; margin-left: 397px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwqN.png"><span><div class="pixmaps">ЧЕМОДАННОЕ НАСТРОЕНИЕ<br></div><br>
<div class="pixmaps1">на тартуге, где пираты обмениваются информацией и ромом, пошел слух, что капитан Пиксель набирает свою команду. надеваем шляпу, берем компас и готовимся в путь</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 310px; margin-left: 387px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwrf.png"><span><div class="pixmaps">УХ ТЫ, МЫ ВЫШЛИ ИЗ БУХТЫ<br></div><br>
<div class="pixmaps1">в капитанской каюте, где хранятся награбленные картины, есть заколдованная подзорная труба, с помощью которой можно вычислить свой корабль из кучи других кораблей.</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 272px; margin-left: 238px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwrB.png"><span><div class="pixmaps">СПАСАЙСЯ КТО МОЖЕТ<br></div><br>
<div class="pixmaps1">на месте, где произошло кораблекрушение и видно много утонувших кораблей, есть с помощью кого поживиться. главное, что бы все доплыли до нашего корабля, иначе карта сокровищ утонет вместе с ними</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 339px; margin-left: 116px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwsV.png"><span><div class="pixmaps">В ПОИСКАХ ЖЕМЧУЖИНЫ<br></div><br>
<div class="pixmaps1">с палубы, где два пьяных пирата подрались за награбленное, пропал мешок с жемчужинами. посмотрим, кто первый отправится на дно морское его искать?</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 362px; margin-left: -35px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwsU.png"><span><div class="pixmaps">СХВАТКА С АКУЛОЙ<br></div><br>
<div class="pixmaps1">когда акула подплывает слишком близко, нужно принимать молниеносные решения. посмотрим ждёт ли тебя награда на корабле или акула окажется быстрее.</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 242px; margin-left: 82px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwsT.png"><span><div class="pixmaps">БАБА НА КОРАБЛЕ<br></div><br>
<div class="pixmaps1">в каюте, где каждый может найти себе одежду, пираты обнаружили оставленное женское платье. баба на корабле. нужно поймать, пока не случилась беда.</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 182px; margin-left: -15px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwsW.png"><span><div class="pixmaps">ПИРАТСКИЙ ПОПУГАЙ<br></div><br>
<div class="pixmaps1">пираты вряд ли расстанутся на своим золотишком, поэтому попугая, похитившего ценный мешочек, решили поймать во что бы то не стало.</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 146px; margin-left: 53px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwsX.png"><span><div class="pixmaps">ПЬЯНЫЙ ТИР<br></div><br>
<div class="pixmaps1">ночью, в трюме со старыми бутылками, раздались выстрелы. двое пьяных пиратов решили посоревноваться в меткости.</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 110px; margin-left: -57px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwsY.png"><span><div class="pixmaps">ПИРАТСКАЯ РАЗБОРКА<br></div><br>
<div class="pixmaps1">пиратские бароны точно знают кто навлек на себя гнев дэйви джонса. осталось решить пойдёт он на корм акулам.</div><br><br>
</span></a>
</td> </tr></tbody></table>
<table style="width: 300px; position: absolute; margin-top: 65px; margin-left: 84px; text-align: center; line-height: 80%;"><tbody><tr> <td>
<a class="tooltip" href=" "><img src="http://funkyimg.com/i/2gwsZ.png"><span><div class="pixmaps">СОКРОВИЩНИЦА<br></div><br>
<div class="pixmaps1">наконец-то вся команда корабля оказалась на суше. приз совсем рядом, осталось найти необходимый ключ и открыть нашего сокровище.</div><br><br>
</span></a>
</td> </tr></tbody></table>
</div>
