Плавное появление блока при наведении

показать и скрыть div при наведенииВсем привет! На связи снова Дмитрий Давыдов. Сегодня я хотел бы рассказать вам об одной нестандартной проблеме, с которой мне пришлось столкнуться.

Недавно, поступил заказ на создание такого эффекта:

показать | спрятать блок

Я подумал, что подобный эффект может пригодиться кому-то из вас и решил написать статью о том, как я его реализовал. Немного переделал оформление и теперь делюсь с вами способом, который я использовал. Делать будем следующее:

появление и скрытие блока при наведении

Я решил обходиться без скриптов, но многие считают, что задача усложнилась. На самом деле это не так 🙂 Я не буду полностью описывать таблицу стилей (ведь вы можете скачать исходник), а  просто передам суть.  Прием заключается в том, что мы делаем блок и задаем ему полную прозрачность. Затем делаем отступ, например, в 20px вниз.

появление блока при наведении курсора

Теперь прописываем стили, которые будут происходить при наведении на заданный элемент. В моем случае это фраза "Дополнительные номера", которой я задал класс "Widget":

появление блока div при наведении

Как вы могли заметить, появление элемента осуществляется при помощи свойства transition, который и устанавливает эффект между двумя состояниями.

Скачать исходник

Надеюсь, кому-то пригодиться данная статья. Я и дальше планирую выкладывать подобные задачки, с которыми мне приходиться сталкиваться при верстке лендингов. А на сегодня - все! Пока!

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Добавить комментарий