0

I am trying to do a zoom animation on this image. The animation works, but when completed it returns to how it was initially even if the mouse is still on the image. Could you modify the code so that the animation pauses when the cursor is still on the image and that when I lift the cursor the image returns to the way it was at the beginning with the reverse animation? It would really help me! Thanks.

HTML:

<img src="https://www.gelestatic.it/thimg/K60JlJ8OO9tEcHvsOUp58mFbH68=/fit-in/1280x1280/https%3A//www.lastampa.it/image/contentid/policy%3A1.39954396%3A1614294221/cat02.jpg%3Ff%3Dlibero%26%24p%24f%3D8723fae" id="image">

CSS:

#image {
    border: solid 10px black;
    border-radius: 15px;
    margin-right: 20px;
    width: 300px;
    height: 300px;
    background: black;

}

#image:hover {
    animation-name: example;
    animation-duration: 1s;

}

@keyframes example {
    0%   {width: 300px; height: 300px;}
    100%  {width: 330px; height: 330px;}

}

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Luca
  • 15
  • 3
  • You may want to look into javascript, DOM and popular web frameworks to bring interactiveness into your page. – Balázs Börcsök Mar 29 '21 at 18:01
  • what you want is transition and not animation – Temani Afif Mar 29 '21 at 19:11
  • @TemaniAfif Sorry, I'm not very good at CSS, at the moment I'm trying to learn by myself with some forums. Could you please explain to me how to use the transition or even better correct my code? I would be really grateful! – Luca Mar 30 '21 at 07:55

0 Answers0