Анимировать псевдоэлемент ::before при наведении ⇐ CSS

[Anonymous]

У меня есть приведенная ниже структура, и я хочу анимировать ее, как только я наведу указатель мыши на h1, у меня появится CSS-код ниже, который не работает, и я не знаю, где я делаю что-то неправильно.
Как могу ли я создавать анимацию только с помощью CSS, поскольку я не хочу использовать JS? Анимацию можно масштабировать или наклонять.
CodepenCode

Код: Выделить всё

.wrapper{
width:200px;
margin:100px auto;
}
.wrapper h1::before {
content: url('https://i.ibb.co/Bg4jS5B/hat-1-e1713504486338.png');
display: inline-block;
margin-left: -25px;
margin-top: -35px;
width:30px;
position: absolute;
/*filter: brightness(0) invert(1);*/
transition: all 0.3s ease-in-out;
}
.wrapper h1::before:hover {
cursor:progress;
transform: scale(1.2);
}

Код: Выделить всё

About Us

Подробнее здесь: https://stackoverflow.com/questions/783 ... e-on-hover