I have following html code for a simple intro page. On mousever (hover) event I will add a border to highlicght the cell. But when I do it with my existing code and css, all the cell heights and widths are increasing.How can I prevent that? I have even tried to decrease the height and widht of the cell when hover, but the result was the same. I

<table class="table_intro" style="margin-left:200px; margin-top:50px;border-spacing:20px">   

<tr >
    <td class="td_index_intro_1"  style="background-color:cornflowerblue">
        <img src="images/index_machovw.png" style="display:block;width:100%; height:100%">
    </td>
    <td class="td_index_intro_2" style="background-color:dodgerblue">
        <img src="images/index_connect.png" style="display:block; width:100% ; height:100% ">
    </td>

</tr>
<tr>
    <td class="td_index_intro_3"  style="background-color:cornflowerblue">
        <img src="images/index_docu.png" style="display:block; width:100% ; height:100%">
    </td>
    <td class="td_index_intro_4"  style="background-color:cornflowerblue">
        <img src="images/index_admin.png" style="display:block; width:100% ; height:100%">
    </td>
   
</tr>
</table>

my css:

.td_index_intro_1 {
max-width :500px;
max-height:300px;  
}
.td_index_intro_2 {
max-width: 500px;
max-height: 300px;
}
.td_index_intro_3 {
max-width: 500px;
max-height: 300px;
}
.td_index_intro_4 {
max-width: 500px;
max-height: 300px;
}

.td_index_intro_1:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}
.td_index_intro_2:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}
.td_index_intro_3:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}
.td_index_intro_4:hover {
border: 4px solid darkblue;
max-width: 492px;
max-height: 292px;
cursor: pointer;
}