Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » HTML & CSS » Всплывающая рамка и подпись изображения при наведении на чистом CSS

Всплывающая рамка и подпись изображения при наведении на чистом CSS

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

Сегодня продемонстрирую парочку простых hover-эффектов для изображений.
В одном из комментариев к очередной статье, меня попросили сделать всплывающую рамку, растягивающуюся по сторонам при наведении на картинку, что я конечно тут же и сделал, а затем чисто для того чтобы эффект выглядел более логичным и завершенным, к рамке добавил и всплывающую подпись .
 
Всплывающая рамка и подпись изображения при наведении
 
Данное решение настолько простое, что не вижу смысла расписывать в подробностях все шаги исполнения, посмотрев исходники, думаю вам будет не трудно разобраться, что куда и зачем )).
Примеры выложил в облачном редакторе Jsfiddle, результат и исходный код, вы можете посмотреть «не отходя от кассы», то есть непосредственно в этой статье, а поковыряться в коде, перейдя в онлайн-редактор.
 

Вариант 1

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

 
В качестве базового контейнера для изображения и , использовал элемент <figure> в сочетании с <figcaption>, который используется в данном примере для вывода подписи. Переопределить стили рамки и подписи, а так же самого изображения, вы можете непосредственно в CSS.
 

Вариант 2

Всё тоже самое, как и в первом варианте, подпись так же появляется посередине и плавно увеличивается до заданного размера, изменил лишь направление появления всплывающей рамки, в данном примере рамка растягивается при наведении от центра вверх и вниз, разметка HTML остаётся без изменений.
 

 
Параметры любого элемента, вы всегда сможете изменить с помощью CSS, например вид, толщину и цвет рамки, цвет, размер и шрифт начертания текста подписей, видоизменить сами миниатюры изображений, и т.д...

В завершение, хочу проанонсировать выход большой коллекции hover-эффектов на чистом CSS для изображений, в которой будут представлены различные виды анимаций, трансформаций другие виды изменений картинок при наведении на них. Следите за обновами, присоединяйтесь ко мне в twitter и вы никогда, и ничего не пропустите.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Subscribe without commenting

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru