Чтобы сделать картинку ссылкой на 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> является обязательным для корректного доступа к картинке для пользователей с ограниченными возможностями, поэтому не пропускайте этот шаг.
