Под эффектом Bubble, я имею в виду "всплытие" картинки на передний план, на подобии того, как это сделано в в операционных системах от Apple. В этой статье я расскажу вам как сделать меню с эффектом Bubble, используя только возможности CSS. И хотя этот метод лишён красивого перехода, как у Apple, он поможет вам сделать
меню немного красивее. В статье описано два метода: CSS-спрайты (простейший метод) и метод подмена картинки (более продвинутый).

Первый метод: CSS-спрайты

Самый простой способ сделать эффект Bubble - это использовать CSS-спрайты. Всё что вам нужно сделать - это
изменить фон картинки.

Но для начала напишем HTML:

<ul id="bubble">
<li>
Full RSS Feed
</li>
<li>
Feed via email
</li>
<li>
Follow me on Twitter
</li>
<li>
I'm on Facebook
</li>
<li>
Save me
</li>
<li>
Fave me
</li>
</ul>

Теперь готовим картинки для спрайтов. Они должны выглядеть следующим образом:

Осталось написать CSS-стили, чтобы сделать для пунктов меню фоновые изображения:

#bubble {
list-style	: none;
margin		: 0px;
padding		: 0px;
}
#bubble li {
display		: inline-block;
margin		: 0px;
padding		: 0px;
}
#bubble li a.icon {
background		: url(sprites.png) no-repeat;
border		: none;
display		: block;
width		: 128px;
height		: 128px;
text-indent		: -9999px;
}

Следующий шаг - написать стиль для наведённых ссылок. Этот стиль будет сдвигать фоновое изображение,
создавая таким образом эффект всплытия картинки.

#bubble li a.feed {
background-position: -139px -12px;
}
#bubble li a.feed:hover {
background-position: -13px -12px;
}
#bubble li a.email {
background-position: -139px -149px;
}
#bubble li a.email:hover {
background-position: -13px -149px;
}
#bubble li a.twitter {
background-position: -139px -283px;
}
#bubble li a.twitter:hover {
background-position: -13px -283px;
}
#bubble li a.facebook {
background-position: -139px -422px;
}
#bubble li a.facebook:hover {
background-position: -13px -422px;
}
#bubble li a.delicious {
background-position: -139px -559px;
}
#bubble li a.delicious:hover {
background-position: -13px -559px;
}
#bubble li a.technorati {
background-position: -139px -698px;
}
#bubble li a.technorati:hover {
background-position: -13px -698px;
}

Всё, меню готово. Как видите, к недостаткам этого способа можно отнести то, что для каждого пункта меню
используется отдельная запись в стилевом файле.

Второй метод: подмен картинки.

Для реализации этого метода, нужно написать немного больше HTML-разметки, но меньше стилей в CSS.
Поскольку для каждой ссылки мы используем по две картинки, наш HTML будет выглядеть так:

<ul id="bubble2">
<li><div align="center">[thumb]http://www.css-tricks.ru/feed.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/feed_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/email.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/email_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/twitter.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/twitter_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/facebook.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/facebook_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/delicious.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/delicious_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/technorati.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/technorati_large.png[/thumb]</div>
</li>
</ul>

В этом методе мы сделаем кое-какие изменения. При наведении мыши пункт меню будет "всплывать" над
соседними пунктами. Разница с первым методом состоит в том, что сейчас необходимо задать
ширину и высоту для элементов

#bubble2 {
list-style	: none;
margin		: 20px 0px 0px;
padding		: 0px;
}
#bubble2 li {
display		: inline-block;
margin		: 0px 5px;
padding		: 0px;
width		: 72px;
height		: 72px;
}

#bubble2 li a thumb {
position	: relative;
border		: none;
}
#bubble2 li a thumb.large {
display		: none;
}
#bubble2 li a:hover thumb.small {
display		: none;
z-index		: 0;
}
#bubble2 li a:hover thumb.large {
display		: block;
margin-top	: -28px;
margin-left	: -28px;
z-index		: 1000;
}

<!--[if IE 7]>
<style type="text/css">
#bubble li, #bubble2 li {
display: inline;
}
</style>
<![endif]-->

<ul id="bubble3">
<li><div align="center">[thumb]http://www.css-tricks.ru/feed_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/email_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/twitter_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/facebook_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/delicious_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/technorati_large.png[/thumb]</div>
</li>
</ul>

#bubble3 {
list-style	: none;
margin		: 20px 0px 0px;
padding		: 0px;
}
#bubble3 li {
display		: inline-block;
margin		: -28px 33px 0 -28px;
padding		: 0px;
width		: 72px;
height		: 72px;
}
#bubble3 li a thumb {
position	: relative;
border		: none;
transform	: scale(0.5625);
-moz-transform	: scale(0.5625);
-webkit-transform: scale(0.5625);
z-index		: 0;
}
#bubble3 li a:hover thumb {
margin-top	: -28px;
transform	: scale(1);
-moz-transform	: scale(1);
-webkit-transform: scale(1);
z-index		: 1000;
}