10 способов изменить изображение при наведении курсора мыши в веб-разработке - Fcodenotes

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

Переход CSS.
Один из самых простых способов изменить изображение при наведении — использовать переходы CSS. Вот пример:

HTML:

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image">
</div>

CSS:

.image-container img {
  transition: 0.3s;
}
.image-container img:hover {
  transform: scale(1.2);
}

Фоновое изображение CSS.
Другой подход — использовать фоновые изображения CSS и изменять фоновое изображение при наведении курсора мыши. Вот пример:

HTML:

<div class="image-container"></div>

CSS:

.image-container {
  width: 300px;
  height: 200px;
  background-image: url(original-image.jpg);
  background-size: cover;
  transition: background-image 0.3s;
}
.image-container:hover {
  background-image: url(new-image.jpg);
}

JavaScript с классами CSS.
Вы также можете использовать JavaScript для применения различных классов CSS при наведении курсора мыши. Каждый класс может иметь свое фоновое изображение. Вот пример:

HTML:

<div class="image-container" onmouseover="changeImage(this)" onmouseout="restoreImage(this)"></div>

CSS:

.image-container {
  width: 300px;
  height: 200px;
  background-size: cover;
}
.image-container.new-image {
  background-image: url(new-image.jpg);
}

JavaScript:

function changeImage(element) {
  element.classList.add("new-image");
}
function restoreImage(element) {
  element.classList.remove("new-image");
}

CSS-спрайты.
CSS-спрайты объединяют несколько изображений в один файл изображения и используют CSS для отображения различных частей изображения при наведении курсора. Вот пример:

HTML:

<div class="image-container"></div>

CSS:

.image-container {
  width: 300px;
  height: 200px;
  background-image: url(sprite-image.jpg);
  background-size: cover;
  transition: background-position 0.3s;
}
.image-container:hover {
  background-position: 0 -200px;
}

Маскировка CSS.
Маскировка CSS позволяет показывать или скрывать части изображения при наведении курсора. Вот пример:

HTML:

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image">
  <div class="mask"></div>
</div>

CSS:

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(new-image.jpg);
  opacity: 0;
  transition: opacity 0.3s;
}
.image-container:hover .mask {
  opacity: 1;
}

CSS-фильтры.
CSS-фильтры можно использовать для изменения внешнего вида изображения при наведении курсора. Вот пример:

HTML:

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image">
</div>

CSS:

.image-container img:hover {
  filter: grayscale(100%);
}

SVG:
Используя SVG (масштабируемую векторную графику), вы можете создавать интерактивные изображения, которые изменяются при наведении курсора мыши. Вот пример:

HTML:

<svg width="300" height="200" viewBox="0 0 300 200">
  <image xlink:href="original-image.jpg" width="300" height="200" />
  <image xlink:href="new-image.jpg" width="300" height="200" opacity="0" />
  <rect width="300" height="200" fill="transparent"
        onmouseover="changeOpacity(1)" onmouseout="changeOpacity(0)" />
</svg>

JavaScript:

function changeOpacity(value) {
  const image = document.querySelector('svg image:nth-of-type(2)');
  image.setAttribute('opacity', value);
}

CSS-сетка.
Используя CSS-сетку, вы можете создать макет сетки и изменить изображение при наведении курсора. Вот пример:

HTML:


<div class="image-grid">
  <div class="image-container"></div>
  <div class="image-container"></div>
</div>.