Image transformation not resetting

Hi there. I have a deck with some images working as buttons to expand some information (using details and summary tags). On the desktop app I have it set so these images spin a bit when hovering with the mouse. When I withdraw the mouse the image goes back to its normal angle. This is the CSS:

img {
  transition: transform 0.3s ease-in-out;
}

img:hover {
  transform: rotate(60deg);
}

However, on AnkiDroid there is no hovering, of course. When I tap on the images they rotate as well, but they don’t go back to the original position. Even when I tap on them again to collapse the details, they are still rotated.

Is there a way to fix this? If they can’t go back to the original angle immediately, maybe when tapping again to collapse?

Thanks!

Aside from clicking outside of the button to remove the :hover effect, maybe this solution could be used to disable the animation completely on mobile devices.

@media (hover: hover) {
  img:hover {
    transform: rotate(60deg);
  }
}
1 Like

I’ll take a look, thanks.

Clicking outside the button doesn’t reset it. The only thing that seems to reset it (other than closing the card) is clicking another button (which then rotates and stays rotated instead).

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.