Animated GIF images - only play on hover in ImagesGrid

[ADTC]

I'm not entirely sure how this could be achieved, but it will be nice if there's an option in ImagesGrid to pause GIF images and then play them (in the hovered item) only when the mouse hovers on an item.

One way to do this is by swapping animated GIF with static image using CSS:

.gif-wrapper {
  position: relative;
  display: inline-block;
}
.gif-wrapper .gif {
  display: none;
}
.gif-wrapper:hover .static {
  display: none;
}
.gif-wrapper:hover .gif {
  display: block;
}
.gif-wrapper .static, .gif-wrapper .gif {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="gif-wrapper">
  <img src="/path/to/static_frame.jpg" class="static" />
  <img src="/path/to/animated.gif" class="gif" />
</div>

But I'm not sure how one could achieve this using getPreview and getImageClassName. The getPreview callback can only return a string (the URL of the image), and not a HTML snippet or a React component so we can't customize the image as shown above.

Perhaps there is some trick to detect mouse hovers and return static image URL vs animated GIF URL based on hover status and location. I'm not sure.