1

Тема: hover-ефект при наведенні на спозиціонований елемент

Загалом ось код:

HTML

<ul class="social">
    <li><a href="#"><i class="fa fa-facebook facebook-icon"></i></a></li>
    <li><a href="#"><i class="fa fa-vk vk-icon"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter twitter-icon"></i></a></li>
    <li><a href="#"><i class="fa fa-rss rss-icon"></i></a></li>
</ul>

CSS

.social {
  position: fixed;
  top: 180px;
  right: 0;
}

.social i {
  width: 45px;
  padding: 12px 0;
}

.facebook-icon {
  background-color: #3b5998;
}

.vk-icon {
  background-color: #507299;
}

.twitter-icon {
  background-color: #1da1f2;
}

.rss-icon{
  background-color: #fe7a23;
}

.facebook-icon:hover,
.vk-icon:hover,
.twitter-icon:hover,
.rss-icon:hover {
  width: 80px;
}

По моєму плану при наведенні іконка має красиво виїжджати( *HI* ), але виходить таке неподобство:

https://pp.vk.me/c636230/v636230466/4418c/1b93R1mdNcs.jpg

Розумію чого так виходить, але не можу виправити проблему. Перелазив весь гугл й так і не зміг знайти такого меню, щоб подивитися як реалізовано(Хоча раніше завжди на нього натикався,  *DONT_KNOW*).

Може хто знає як зробити так, щоб при наведенні на іконку вона "розширялася", а інші залишалися на місцях. Буду дуже вдячний!  *DRINK*

Подякували: 221VOLT1

2

Re: hover-ефект при наведенні на спозиціонований елемент

http://codepen.io/karmeljuk/pen/vypBPK

Був собі цебер, та переполуцебрився на полуцебренята
Неймовірний блог про мандри http://bosano.ga
Подякували: 221VOLT1

3

Re: hover-ефект при наведенні на спозиціонований елемент

Дякую. Але мені трохи про інше йшлося. Тобто щоб при наведенні змінювалася ширина елементу(<i>). Тобто щоб він залишався притиснутим до краю браузера...

4

Re: hover-ефект при наведенні на спозиціонований елемент

далі вже підлаштовуйте під свої потреби, суть я кинув
як варіант http://codepen.io/karmeljuk/pen/vypBPK

Був собі цебер, та переполуцебрився на полуцебренята
Неймовірний блог про мандри http://bosano.ga
Подякували: Monolith1

5

Re: hover-ефект при наведенні на спозиціонований елемент

karmeljuk написав:

далі вже підлаштовуйте під свої потреби, суть я кинув
як варіант http://codepen.io/karmeljuk/pen/vypBPK

О дякую! Я чомусь не подумав про внутрішні відступи... :)