Is it possible to design something similar with GP in woocommerce?

Thats correct.
The @media (min-width: 769px) { /*CSS here */ } limits it to desktop only. The effect relies on hover which doesn't apply to mobile.

However, the website I left at the beginning of the post works on mobile ...

Yes - but not very well - sometimes it hovers and other times it just links to the product page.
You can try moving the CSS from within the media query and see what effect you get

The only way to always make it hover first would be to use javascript.

Thanks a lot, David.

One last query to finish perfecting the effect: everything works perfectly when there are 3 columns of products (that is, 3 images per row), but when I choose to put 2 columns of images, the div protrudes in width more than the image ...

That will be because the Product Image size is not wide enough to occupy the width of the column.

Thanks, David!

You're welcome