Как можно добиться следующего эффекта?

Question

[Гриша Никольский]

Здравствуйте. Есть потребность в создании навороченного меню. Каждый пункт меню - это круг с иконкой.
Мне нужно добиться такого эффекта, чтобы при наведении на круг, взамен иконки появлялась надпись какая-либо.



Возьмем первый пункт меню(круг). На нем изображен домик. Так вот при наведении на него должен срабатывать какой-то эффект, который бы заменил иконку домика на надпись "домой".

Если знаете хоть какой-то эффект, отражающий моим запросам - напишите, буду признателен. Если же такой эффект нужно будет пилить самому, то с помощью чего?

Заранее спасибо!

Answer 1

[Михаил]

Можно по разному сделать.

CSS transitions сейчас в тренде:

codepen.io/mixa_ru/pen/vLNZOK

Самый нижний вариант.

Answer 2

[coderisimo]

делаешь два слоя в одном надпись в другом иконка - вуаля!
jsfiddle.net/uXeg2/2

Comments

[Inwork277]

jQuery тут уж совсем ни к чему) jsfiddle.net/uXeg2/414

[Гриша Никольский]

Inwork277: В связи с тем, что я чаще прогаю, чем верстаю, мне удобней будет JQuery. Или он сильно замедляет работу?

[coderisimo]

Гриша Никольский: чистый css как мне кажется будет оптимальнее в данном случае. но главное суть. у тебя есть два слоя и ты управляешь их видимостью.

Answer 3

[Гриша Никольский]

Нашел то, что искал. Вот пример подобного эффекта: www.jqueryrain.com/?0BLJfRgv
Погуглил, название у этого дела незамысловатое: image hover effects. Сразу почему-то не додумался.