Как сделать картинку ссылкой
Обычно ссылка выглядит как подчёркнутый участок текста, окрашенный в стандартный синий цвет. Нажимая на заинтересовавшую ссылку, пользователь переходит на новую страницу или сайт.
Ссылки в большой статье могут потеряться, а вот красочная картинка привлекает больше внимания.
Чтобы вставить изображение на сайт, используют тег . У тега есть четыре обязательных атрибута:
- src — для указания пути до файла с картинкой и его отображения на экране;
- width и height — размеры изображения. Эти атрибуты позволяют резервировать место для изображения, чтобы убрать «прыжки» страницы пока изображение грузится;
- alt — альтернативное описание.
Адрес ссылки задаётся в формате URL с помощью атрибута href .
Часто изображения-ссылки используются в галереях, когда с уменьшенной версии изображения ставится ссылка на полноразмерную версию картинки или на отдельную страницу с этим изображением и подписью к нему.
Как выделить изображение-ссылку?
Если вы хотите выделить ссылку, сделайте картинку увеличивающейся или подсветите её цветом при наведении курсора.
Чтобы картинка-ссылка меняла цвет, пропишите в стилях её состояние:
Состояние :hover срабатывает, когда пользователь наводит курсор мыши на элемент. Но, если картинка совсем пропадёт, а вместо неё появится яркий цвет, пользователь не успеет рассмотреть изображение.
Чтобы цвет был полупрозрачным, а картинка просвечивала сквозь него, укажите свойство opacity .
Это свойство задает уровень прозрачности элемента. Значение 0 соответствует полной прозрачности, а значение 1 — полной непрозрачности. Укажите любое число от 0 до 1 , чтобы получить нужный уровень прозрачности.
Чтобы картинка увеличивалась при наведении курсора, примените свойство transform .
Теперь при наведении курсора картинка увеличится в полтора раза. Вместо числа 1.5 укажите подходящее значение, чтобы увеличить или уменьшить картинку. Больше единицы — увеличить, от 0 до 1 — уменьшить. Например, если нужно уменьшить картинку в два раза, укажите для свойства transform значение 0.5.
Полезные материалы
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.