Картинка как ссылка css

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

Вот пример CSS-кода для того, чтобы сделать картинку ссылкой и добавить эффект при наведении курсора мыши:

.link-image {
  display: inline-block; /* чтобы ссылка занимала только необходимое пространство */
}

.link-image:hover {
  opacity: 0.7; /* добавить прозрачность при наведении курсора мыши */
  transform: scale(1.1); /* увеличить размер изображения */
}

.link-image img {
  display: block; /* убрать обрамление у картинки */
  width: 100%; /* чтобы картинка заполняла всю область ссылки */
  height: auto; /* чтобы не искажалось пропорций */
  border: none; /* убрать границу */
}

HTML-код для этой ссылки-изображения может выглядеть так:

<a href="https://example.com" class="link-image">
  <img src="path/to/image.jpg" alt="Alt text">
</a>

Здесь мы создали ссылку с классом link-image и поместили внутри нее картинку в теге <img>. Класс link-image добавляет стили для ссылки и обернутой внутри картинки.

Обратите внимание, что добавление атрибута alt к тегу <img> является обязательным для корректного доступа к картинке для пользователей с ограниченными возможностями, поэтому не пропускайте этот шаг.