Domanda css ingrandmento immagine al passaggio gel mouse

[robertok96]

Salve ragazzi sto lavorando alla tesina per la maturit� vorrei presentarla con una pagina html e quindi abbellirla un po col css ho fatto una homepage di questo tipo http://i66.tinypic.com/30wp740.png (ovviamente � tutta da finire ancora) la mia idea era fare la lista delle varie materie in una tabella e cliccando sul nome della materia ti portava alla pagina dove viene illustrato l'argomento ecc ecc quello che vorrei fare nella stessa tabella come vedete nella foto sono delle immagini sotto ogni materia con la mappa concettuale di oguna dove mettendo il mouse sull'immagine si ingrandiva ecco il codice che ho usato:

<style>
.dimensione {
transition-duration: 1s;
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-property: transform;
-ms-transition-property: -ms-transform;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
overflow:hidden;
}
.dimensione:hover {
-ms-transform: scale(5,8);
-webkit-transform: scale(5,5);
-moz-transform: scale(5,5);
-o-transform: scale(5,5);
}
</style>

per la tabella invece :

<table border ="6" >

<tr>

<td >  <a href="Sistemi1.php">Sistemi</a> </td>

<td > Gestione Del Progetto </td>
<td> Storia </td>
<td> Italiano </td>
<td> Informatica </td>
<td> Tecnologia e Progettazione </td>
<td> Matematica </td>
<td> Inglese </td>

</tr>
<tr>


<td valign="top" width="130"class="dimensione"><img  src="info.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="200" /></td>
<td valign="top" width="100"class="dimensione"><img  src="info.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="300" /></td>
<td valign="top" width="200"class="dimensione"><img  src="info.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="300" /></td>
<td valign="top" width="200"class="dimensione"><img  src="info.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="300" /></td>
<td valign="top" width="200"class="dimensione"><img  src="info.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="300" /></td>
<td valign="top" width="200"class="dimensione"><img  src="info.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="300" /></td>
<td valign="top" width="200"class="dimensione"><img  src="info.png" style="display: block; float: none; margin-left: auto; margin-right: auto;" width="300" /></td>


</tr>

il mio problema � che queste immagini si aprono ma in modo sparso c� vorrei che si ingrandissero al centro della pagina e si vedesse bene l'immagine mentre si ingrandiscono chi sopra chi a destra (andando fuori pagina) come posso risolvere?

[VinzClortho]

La pseudo-classe :hover non è fatta per lo scopo per cui stai cercando di utilizzarla. Ti consiglio di un lightbox like come questo: http://fancybox.net/
Per il futuro invece, ti consiglio di limitare il ricorso alle tabelle e l'abuso di stili in linea. In bocca al lupo per la maturità .