Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

Вариант 1

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

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

Вариант 2

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

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

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

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

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

Всего комментариев: 3

  • Валентин: 30 мая, 2019 в 15:48

    Здравствуйте!
    Отличный пример. А что нужно изменить, чтобы вставить две ссылки на два разных сайта? Спасибо.

    Ответить
    • driver: 30 мая, 2019 в 22:11

      Если не вдаваясь в подробности, по-быстрому, примерно так: см.пример

      Ответить
      • Валентин: 31 мая, 2019 в 11:39

        Спасибо за ответ! Уже разобрался.

        Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>