SVG shake animation on hover - css

Question

I am trying to make an svg img shake with CSS keyframes when you hover over it.
This is the effect I am trying to achieve: https://www.w3schools.com/code/tryit.asp?filename=FZ7CQHXPG42J
There is some javascript that animates the same svg but it targets a parent div #ellipse, that moves from left to right whenn clicked on the hamburger icon. I don't see how it could interfere, but I've added it just to make sure.
I have added the relevant code below. For the full code please see the website.
// Other unrelated(!?) animations on #ellipse //
function moveEllipseRight() {
ellipse.animate([
// keyframes
{
transform: 'translateX(0px)'
},
{
transform: 'translateX(' + width + 'px)'
}
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});
}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{
transform: 'translateX(' + width + 'px)'
},
{
transform: 'translateX(0px)'
}
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});
}
#ellipse {
position: absolute;
top: 120px;
z-index: -99;
animation: 3s linear 0s slide 1;
left: -200px;
}
img.shake:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<div id="ellipse">
<img src="https://lh5.googleusercontent.com/-yqttzktPkDY/AAAAAAAAAAI/AAAAAAAABGU/z6CVGRmY-C8/photo.jpg?sz=328" alt="ellipse" class="shake" width="400" height="400" />
</div>

Answer 1

The issue is with your #ellipse style.
#ellipse {
position: absolute;
top: 120px;
z-index: -99; /* remove this, it is not doing anything useful. */
animation: 3s linear 0s slide 1;
left: -200px;
}
the issue was, hover was not getting triggered at all, as it was behind container element due to negative z-index. This negative z index is not useful at all, unless you are planning to put text above the image, which I do not see in your site.