Как сделать картинку ссылкой

13 января 2023

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

Ссылки в большой статье могут потеряться, а вот красочная картинка привлекает больше внимания.

Чтобы вставить изображение на сайт, используют тег <img>. У тега есть четыре обязательных атрибута:

src — для указания пути до файла с картинкой и его отображения на экране;
width и height — размеры изображения. Эти атрибуты позволяют резервировать место для изображения, чтобы убрать «прыжки» страницы пока изображение грузится;
alt — альтернативное описание.

<img src="images/cat.jpg" width="600" height="200" alt="Котик">

Для создания ссылок используется тег <a>. Чтобы сделать картинку ссылкой, нужно разместить её внутри тега <a>:

<a href="https://htmlacademy.ru">
  <img src="images/cat.jpg" width="600" height="200" width="600">
</a>

Адрес ссылки задаётся в формате URL с помощью атрибута href.

Часто изображения-ссылки используются в галереях, когда с уменьшенной версии изображения ставится ссылка на полноразмерную версию картинки или на отдельную страницу с этим изображением и подписью к нему.

Как выделить изображение-ссылку?

Если вы хотите выделить ссылку, сделайте картинку увеличивающейся или подсветите её цветом при наведении курсора.

Чтобы картинка-ссылка меняла цвет, пропишите в стилях её состояние:

a:hover img {   
  background-color: yellow; 
}

Состояние :hover срабатывает, когда пользователь наводит курсор мыши на элемент. Но, если картинка совсем пропадёт, а вместо неё появится яркий цвет, пользователь не успеет рассмотреть изображение.

Чтобы цвет был полупрозрачным, а картинка просвечивала сквозь него, укажите свойство opacity.

a:hover img {   
  background-color: yellow; 
  opacity: 0.5;
}

Это свойство задает уровень прозрачности элемента. Значение 0 соответствует полной прозрачности, а значение 1 — полной непрозрачности. Укажите любое число от 0 до 1, чтобы получить нужный уровень прозрачности.

На втором изображении видим эффект свойства hover при наведенном курсоре. Источник

Чтобы картинка увеличивалась при наведении курсора, примените свойство transform.

a:hover img {   
  transform: scale(1.5); 
}

Теперь при наведении курсора картинка увеличится в полтора раза. Вместо числа 1.5 укажите подходящее значение, чтобы увеличить или уменьшить картинку. Больше единицы — увеличить, от 0 до 1 — уменьшить. Например, если нужно уменьшить картинку в два раза, укажите для свойства transform значение 0.5.