Один из популярных плагинов, которые можно использовать для создания эффекта смены изображения при наведении мыши, - это "jQuery Image Swap". Он позволяет заменять изображения при наведении на них мыши и восстанавливать изначальные изображения при снятии наведения.
Для создания подобного эффекта, подобного тому, что показан на сайте https://lite-demo.ru/, можно использовать CSS свойство `background-image` и jQuery плагин "hover" для изменения фона элемента при наведении мыши.
Примерный код:
HTML:
```html
<div class="image-container">
<div class="background-image"></div>
<div class="hover-image"></div>
</div>
```
CSS:
```css
.image-container {
position: relative;
width: 200px;
height: 200px;
}
.background-image, .hover-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.background-image {
background-image: url('изначальное_изображение.jpg');
background-size: cover;
}
.hover-image {
background-image: url('изображение_при_наведении.jpg');
background-size: cover;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.image-container:hover .hover-image {
opacity: 1;
}
```
jQuery:
```javascript
$(document).ready(function() {
$('.image-container').hover(function() {
$(this).find('.hover-image').fadeToggle();
});
});
```
Обратите внимание, что в приведённом коде используются CSS и jQuery, поэтому необходимо подключить библиотеку jQuery перед использованием этого кода.