Всем привет! На связи снова Дмитрий Давыдов. Сегодня я хотел бы рассказать вам об одной нестандартной проблеме, с которой мне пришлось столкнуться.
Недавно, поступил заказ на создание такого эффекта:
Я подумал, что подобный эффект может пригодиться кому-то из вас и решил написать статью о том, как я его реализовал. Немного переделал оформление и теперь делюсь с вами способом, который я использовал. Делать будем следующее:
Я решил обходиться без скриптов, но многие считают, что задача усложнилась. На самом деле это не так :) Я не буду полностью описывать таблицу стилей (ведь вы можете скачать исходник), а просто передам суть. Прием заключается в том, что мы делаем блок и задаем ему полную прозрачность. Затем делаем отступ, например, в 20px вниз.
Теперь прописываем стили, которые будут происходить при наведении на заданный элемент. В моем случае это фраза "Дополнительные номера", которой я задал класс "Widget":
Как вы могли заметить, появление элемента осуществляется при помощи свойства transition, который и устанавливает эффект между двумя состояниями.
Надеюсь, кому-то пригодиться данная статья. Я и дальше планирую выкладывать подобные задачки, с которыми мне приходиться сталкиваться при верстке лендингов. А на сегодня - все! Пока!
2 комментария
Спасибо! очень хорошее решение
красава мужик