Продолжаю серию статей о создании различных эффектов при наведении на изображении, выполненных исключительно средствами CSS, без подключения javacript. Сейчас трудно кого-нибудь удивить hover-эффектами для картинок, поражает лишь многообразие видов и форм таких эффектов. Чаще всего используются эффектные появления подписей к миниатюрам изображений, реже к полноразмерным картинкам.
Сегодня продемонстрирую парочку простых hover-эффектов для изображений.
В одном из комментариев к очередной статье, меня попросили сделать всплывающую рамку, растягивающуюся по сторонам при наведении на картинку, что я конечно тут же и сделал, а затем чисто для того чтобы эффект выглядел более логичным и завершенным, к рамке добавил и всплывающую подпись изображения.
Данное решение настолько простое, что не вижу смысла расписывать в подробностях все шаги исполнения, посмотрев исходники, думаю вам будет не трудно разобраться, что куда и зачем )).
Примеры выложил в облачном редакторе Jsfiddle, результат и исходный код, вы можете посмотреть «не отходя от кассы», то есть непосредственно в этой статье, а поковыряться в коде, перейдя в онлайн-редактор.
Вариант 1
Всплывающая рамка и подпись появляются посередине картинки, рамка растягивается по сторонам, подпись плавно масштабируется до определённого размера, при этом изображение слегка затеняется.
В качестве базового контейнера для изображения и подписи, использовал элемент <figure> в сочетании с <figcaption>, который используется в данном примере для вывода подписи. Переопределить стили рамки и подписи, а так же самого изображения, вы можете непосредственно в CSS.
Вариант 2
Всё тоже самое, как и в первом варианте, подпись так же появляется посередине и плавно увеличивается до заданного размера, изменил лишь направление появления всплывающей рамки, в данном примере рамка растягивается при наведении от центра вверх и вниз, разметка HTML остаётся без изменений.
Параметры любого элемента, вы всегда сможете изменить с помощью CSS, например вид, толщину и цвет рамки, цвет, размер и шрифт начертания текста подписей, видоизменить сами миниатюры изображений, и т.д...
В завершение, хочу проанонсировать выход большой коллекции hover-эффектов на чистом CSS для изображений, в которой будут представлены различные виды анимаций, трансформаций другие виды изменений картинок при наведении на них. Следите за обновами, присоединяйтесь ко мне в twitter и вы никогда, и ничего не пропустите.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Здравствуйте!
Отличный пример. А что нужно изменить, чтобы вставить две ссылки на два разных сайта? Спасибо.
Если не вдаваясь в подробности, по-быстрому, примерно так: см.пример
Спасибо за ответ! Уже разобрался.