Для создания эффекта ребристого стекла при наведении курсора можно использовать CSS свойство `filter` с функцией `url(#)`, которая ссылается на SVG-фильтр. В данном случае, мы будем использовать фильтр `feMorphology`, который позволяет создать ребристый эффект.
Пример CSS:
```css
.image-container {
position: relative;
overflow: hidden;
}
.image {
width: 100%;
height: auto;
transition: filter 0.5s;
}
.image:hover {
filter: url(#morph);
}
```
Пример SVG-фильтра:
```html
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="morph" x="-50%" y="-50%" width="200%" height="200%">
<feMorphology operator="dilate" radius="2" in="SourceGraphic" result="Morphology" />
<feComposite operator="out" in="SourceGraphic" in2="Morphology" result="Composite"/>
</filter>
</svg>
```
Что касается эффекта деформации при наведении на изображение, его можно достичь как с помощью CSS (например, используя `transform: scale()` или `transform: skew()`), так и с помощью HTML Canvas. Для более сложных деформаций, связанных с анимацией или интерактивностью, HTML Canvas может быть предпочтительным вариантом.
Если решите использовать HTML Canvas, то можно создать функцию, которая будет обрабатывать перемещение курсора над изображением и изменять его форму или размер в зависимости от этого движения. С помощью методов `getContext` и `drawImage` можно обработать изображение и изменять его в реальном времени.
Для деформации изображения на Canvas, вам может потребоваться использовать методы для рисования пикселей, масштабирования или искажения изображения. При необходимости, можно также использовать WebGL для более сложных 3D-эффектов.
Видео, которое вы предоставили, не отображается в данном контексте, поэтому я не могу дать конкретные рекомендации по его использованию. Надеюсь, что информация выше окажется полезной для вас.