Mettre en premier plan une image par survol

Bonjour !
A voir le nombre de pages qui traitent de ce sujet, je pense qu'il est très banal, ou très commun, chez les créateurs de pages html.
Pourtant, malgré des heures passées à parcourir les forums, je n'ai pas trouvé la réponse à ma question.
Peut-être, en tant que débutant, ai-je mal lu ?

Ce que j'aimerais faire : sur une page, j'ai une trentaine de photos miniatures (min1, 2, etc.). J'ai par ailleurs la trentaine de photos de plus grande taille (max1, 2, etc.).
Je voudrais que lorsque la souris survole une miniature (min1, par exemple), la photo agrandie (max1) s'affiche en premier plan, au centre de préférence, sans décaler l'ensemble des miniatures restant en arrière-plan.
Tous mes essais, basés sur des exemples trouvés ici et là, avec les css, hover, z-index, etc. sont restés infructueux.

Une idée m'est passée par la tête, mais je ne m'y suis pas encore attaqué : rassembler toutes les miniatures en une seule image "background", y définir des "maps", donc un lien pour chacune d'elles, qui afficherait la photo agrandie sur un plan plus en avant. Est-ce jouable ?

Toutes les idées seront les bienvenues, merci !