la parte tra <style> e </style> la puoi mettere tra i tag head della pagina o meglio ancora in un file esterno (nel qual caso i tag <style> non ti serviranno) fatto col blocco note e salvato con estensione .css che richiamerai nell'head con
codice:
<link href="style.css" rel="stylesheet type="text/css>
la parte <a href="eccetera rappresenta il link della miniatura, mentre prevederai uno spazio/una cella vuota all'interno della quale metterai l'uno sotto l'altro un div per ogni foto contenente il relativo testo; dando la classe che prevede la "scomparsa" del div (il display: none, in pratica) tali div non saranno visibili quando il mouse se ne sta fuori dalla miniatura, ma saranno resi visibili uno alla volta quando passerai col mouse sulla miniatura (nel senso che per ogni miniatura ci sara' un div: passando col mouse sulla tal miniatura, il relativo div sara' reso visibile attraverso il cambio di classe e nella fattispecie sostituendo display: none; con display: block



per l'esempio, dai un'occhiata al sito che ho in firma: nn far caso al disordine, e' la mia palestra, ma passa sulle orme di pagina 4: e' lo stesso meccanismo