[html]<div class="mainBlock">
<div class="lake cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Кристальное озеро <br> [Самое живописное из местных озёр, на которых расположен детский лагерь «Скаути-Каунти».]</div>
</div>
<div class="camp cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Детский Лагерь «Скаути-Каунти» <br> [Детский лагерь, расположенный на Кристальном Озере. Здесь ваши дети могут отдохнуть, повеселиться и найти новых друзей!]</div>
</div>
<div class="forest cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Местная лесозаготавливающая компания, работает почти со всеми близлежащими городами в плане поставок древесины. Частенько здесь собираются пикеты "зеленых", желающих остановить вырубку лесов.</div></div>
<div class="mountain cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Гора Ньювермор<br>[Высота 2500 м, на вершинах гор лежат вечные ледники. Имеет единственное значимое место - Пик Мертвецов, на котором частенько умирали приезжие альпинисты от горной болезни, данный пик характерен высокой разреженностью воздуха, не смотря на то, что высота горы этому не особо способствует.]</div>
</div>
<div class="olake cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Озеро подводных камней<br>[Не даром оно названо именно так, под тонкой водной гладью располагается сеть огромных подводных пещер, через которые грунтовые воды поддерживают озеро даже в самую ужасную жару. Летом оно разливается за счет таящих снегов вершины.]</div>
</div>
<div class="park cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Национальный парк Ньювермор<br>[Место, вечно наводненное туристами, здесь тебе и все для альпинизма, и лодку можно напрокат взять, да даже дайверское оборудование для погружения в кристально-чистое озеро. В этом месте так же можно снять домик на уикэнд, но лучше бронировать заранее - желающих много. Через это место так же проходит конная тропа с фермы "Райский уголок".]</div>
</div>
<div class="dlake cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Озеро Тахо<br>[По поверьям индейцев, богиня, принявшая облик прекрасной девушки, что оплакивала собственный народ, который безбожно истребляли переселенцы. Горе богини было столь велико, что теперь, на месте её печали, образовалось это озеро, в котором кристально чистая соленая вода. По поверьям, каждую ночь на озеро опускается туман.]</div>
</div>
<div class="farm cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Ферма МакМиллен<br>[Некогда небольшая ферма, основанная любящей парой, ещё в двадцатом веке. Сейчас – самая обширная и богатая на территории Ньювермора, на которой занимаются всевозможным аграрным хозяйством, а так же животноводством. Её границы плотно прилегают к кристальному озеру, однако местные боятся водить туда скот или как бы то ни было пользоваться благами озера из-за суеверий.]</div>
</div>
<div class="ofarm cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Ферма Доннери<br>[Cамая молодая, но уже начавшая успешно конкурировать с другими фермами. Здесь разводят скот, всех мастей и видов. Основной поставщик мяса, яйц и молока в город, в отличие от МакМилленов торгуют не только живыми головами, но и мясом.]</div>
</div>
<div class="dfarm cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Ферма Райский Уголок<br>[Равнинная ферма, на которой разводят лошадей на продажу и в аренду местных гидам и туристическим агентствам, промышляющим конными прогулками. Конные походы проходят по самым живописным местам Ньвермора, могут проходить от трех дней до недели. Так же есть прогулки для начинающих.]</div>
</div>
<div class="gas cursorbox">
<img src="https://forumstatic.ru/files/001a/c6/f0/91545.png" class="lakeimg">
<div class="lakespan">Заправка и придорожное кафе "Колесо"<br>[Единственная заправка на весь Ньювермор, пользующаяся популярностью не только у дальнобойщиков, но и у местных водил, а так же байкеров. Так что не сложно представить какой тут контингент. Работает 24 часа в сутки, для особо засидевшихся есть небольшой мотель размером в три тесных комнатки.]</div>
</div>
</div>
</div>
<style type="text/css">
.mainBlock{
width: 500px;
height: 500px;
margin: 0 auto;
background-image: url(https://forumstatic.ru/files/001a/c6/f0/27030.png);
position: relative;
z-index: 1;
}
.cursorbox{
cursor:pointer;
display: inline-block;
}
/*====lake=====*/
.lake>img{
position: absolute;
top: 1px;
left: 291px;
z-index: 5
/*coords*/
}
.lake div{
position: absolute;
top: 43px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
left: 256px;
display: none;
z-index: 6;
}
/*====lake end=====*/
/*====camp=====*/
.camp>img{
position: absolute;
top:40px;
left: 236px;
z-index: 5
}
.camp div{
position: absolute;
top: 80px;
left: 219px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====camp end=====*/
/*====forest=====*/
.forest>img{
position: absolute;
top: 131px;
left:80px;
z-index: 5
}
.forest div{
position: absolute;
top: 175px;
left: 62px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
}
/*====forest end=====*/
/*====mountain=====*/
.mountain>img{
position: absolute;
top: 282px;
left: 35px;
z-index: 5
}
.mountain div{
position: absolute;
top: 275px;
left: 62px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
}
/*====mountain end=====*/
/*====mountain=====*/
.mountain>img{
position: absolute;
top: 282px;
left: 35px;
z-index: 5
}
.mountain div{
position: absolute;
top: 275px;
left: 62px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====mountain end=====*/
/*====olake=====*/
.olake>img{
position: absolute;
top: 364px;
left: 98px;
z-index: 5
}
.olake div{
position: absolute;
top: 209px;
left: 62px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====olake end=====*/
/*====park=====*/
.park>img{
position: absolute;
top: 305px;
left: 108px;
z-index: 5
}
.park div{
position: absolute;
top: 106px;
left: 62px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====park end=====*/
/*====dlake=====*/
.dlake>img{
position: absolute;
top: 379px;
left: 304px;
z-index: 5
}
.dlake div{
position: absolute;
top: 188px;
left: 213px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====dlake end=====*/
/*====farm=====*/
.farm>img{
position: absolute;
top: 329px;
left: 279px;
z-index: 5
}
.farm div{
position: absolute;
top: 136px;
left: 213px;
text-align: justify;
background-color: #fff;
width: 205px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====farm end=====*/
/*====ofarm=====*/
.ofarm>img{
position: absolute;
top: 268px;
left: 434px;
z-index: 5
}
.ofarm div{
position: absolute;
top: 136px;
left: 267px;
text-align: justify;
background-color: #fff;
width: 205px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====ofarm end=====*/
/*====dfarm=====*/
.dfarm>img{
position: absolute;
top: 135px;
left: 339px;
z-index: 5
}
.dfarm div{
position: absolute;
top: 178px;
left: 267px;
text-align: justify;
background-color: #fff;
width: 205px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====dfarm end=====*/
/*====gas=====*/
.gas>img{
position: absolute;
top: 222px;
left: 329px;
z-index: 5
}
.gas div{
position: absolute;
top: 32px;
left: 267px;
text-align: justify;
background-color: #fff;
width: 170px;
padding: 10px 10px;
border-radius: 6px;
font-family: roboto;
display: none;
z-index: 6;
}
/*====gas end=====*/
.lakeimg:hover + div{
display: block !important;
}
</style>[/html]
