<style type="text/css">
/* for the tables version */
div.tableHolder {width:690px; border:1px solid #aaa; box-shadow:0 0 10px rgba(0,0,0,0.5); margin:25px auto;}
table.cssplayAccordian {border-collapse:collapse; padding:0; margin:0; width:690px; height:474px;}
table.cssplayAccordian td {padding:0; width:136px; height:117px; border:2px solid #fff;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
table.cssplayAccordian td.p1 {background:url(pic_1h.jpg) no-repeat center center;}
table.cssplayAccordian td.p2 {background:url(pic_2h.jpg) no-repeat center center;}
table.cssplayAccordian td.p3 {background:url(pic_3h.jpg) no-repeat center center;}
table.cssplayAccordian td.p4 {background:url(pic_4h.jpg) no-repeat center center;}
table.cssplayAccordian td.p5 {background:url(pic_5h.jpg) no-repeat center center;}
table.cssplayAccordian td.p6 {background:url(pic_6h.jpg) no-repeat center center;}
table.cssplayAccordian td.p7 {background:url(pic_7h.jpg) no-repeat center center;}
table.cssplayAccordian td.p8 {background:url(pic_8h.jpg) no-repeat center center;}
table.cssplayAccordian td.p9 {background:url(pic_9h.jpg) no-repeat center center;}
table.cssplayAccordian td.p10 {background:url(pic_10h.jpg) no-repeat center center;}
table.cssplayAccordian td.p11 {background:url(pic_11h.jpg) no-repeat center center;}
table.cssplayAccordian td.p12 {background:url(pic_12h.jpg) no-repeat center center;}
table.cssplayAccordian td.p13 {background:url(pic_13h.jpg) no-repeat center center;}
table.cssplayAccordian td.p14 {background:url(pic_14h.jpg) no-repeat center center;}
table.cssplayAccordian td.p15 {background:url(pic_15h.jpg) no-repeat center center;}
table.cssplayAccordian td.p16 {background:url(pic_16h.jpg) no-repeat center center;}
table.cssplayAccordian td.p17 {background:url(pic_17h.jpg) no-repeat center center;}
table.cssplayAccordian td.p18 {background:url(pic_18h.jpg) no-repeat center center;}
table.cssplayAccordian td.p19 {background:url(pic_19h.jpg) no-repeat center center;}
table.cssplayAccordian td.p20 {background:url(pic_20h.jpg) no-repeat center center;}
table.cssplayAccordian:hover td {width:50px; height:50px;}
table.cssplayAccordian:hover tr:hover td {height:320px;}
table.cssplayAccordian td:hover {width:480px; height:320px;}
</style>
<style type="text/css">
/* for the display tables version */
div.tableHolder2 {width:690px; border:1px solid #aaa; box-shadow:0 0 10px rgba(0,0,0,0.5); margin:25px auto;}
.tableAccordian {display:table; width:690px; height:474px;}
.tableAccordian div.tableRow {display:table-row;}
.tableAccordian div div {display:table-cell; width:136px; height:117px; border:1px solid #fff;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.tableAccordian .p1 {background:url(pic_1h.jpg) no-repeat center center;}
.tableAccordian .p2 {background:url(pic_2h.jpg) no-repeat center center;}
.tableAccordian .p3 {background:url(pic_3h.jpg) no-repeat center center;}
.tableAccordian .p4 {background:url(pic_4h.jpg) no-repeat center center;}
.tableAccordian .p5 {background:url(pic_5h.jpg) no-repeat center center;}
.tableAccordian .p6 {background:url(pic_6h.jpg) no-repeat center center;}
.tableAccordian .p7 {background:url(pic_7h.jpg) no-repeat center center;}
.tableAccordian .p8 {background:url(pic_8h.jpg) no-repeat center center;}
.tableAccordian .p9 {background:url(pic_9h.jpg) no-repeat center center;}
.tableAccordian .p10 {background:url(pic_10h.jpg) no-repeat center center;}
.tableAccordian .p11 {background:url(pic_11h.jpg) no-repeat center center;}
.tableAccordian .p12 {background:url(pic_12h.jpg) no-repeat center center;}
.tableAccordian .p13 {background:url(pic_13h.jpg) no-repeat center center;}
.tableAccordian .p14 {background:url(pic_14h.jpg) no-repeat center center;}
.tableAccordian .p15 {background:url(pic_15h.jpg) no-repeat center center;}
.tableAccordian .p16 {background:url(pic_16h.jpg) no-repeat center center;}
.tableAccordian .p17 {background:url(pic_17h.jpg) no-repeat center center;}
.tableAccordian .p18 {background:url(pic_18h.jpg) no-repeat center center;}
.tableAccordian .p19 {background:url(pic_19h.jpg) no-repeat center center;}
.tableAccordian .p20 {background:url(pic_10h.jpg) no-repeat center center;}
.tableAccordian:hover div div{width:50px; height:50px;}
.tableAccordian:hover div.tableRow:hover div {height:320px;}
.tableAccordian div.tableRow:hover div:hover {width:480px; height:320px;}
/* to get IE7 to display the images inline; */
.tableAccordian div div {*float:left;}
</style>
<h2>Version #1 using a table - IE7, IE8, IE9, IE10, Firefox, Opera, Safari and Chrome</h2>
<div class ="tableHolder">
    <table class ="cssplayAccordian">
	   <tbody><tr><td class ="p1 c1"></td><td class ="p2 "></td><td class ="p3"></td>
<td class ="p4"></td><td class ="p5"></td></tr>
	   <tr><td class ="p6 c1"></td><td class ="p7"></td><td class ="p8"></td>
<td class ="p9"></td><td class ="p10"></td></tr>
	   <tr><td class ="p11 c1"></td><td class ="p12"></td><td class ="p13"></td>
<td class ="p14"></td><td class ="p15"></td></tr>
	   <tr><td class ="p16 c1"></td><td class ="p17"></td><td class ="p18"></td>
<td class ="p19"></td><td class ="p20"></td></tr>
    </tbody></table>
</div>
<br><br>
<h2>Version #2 using display:table - IE8, IE9, IE10, Firefox, Opera, Safari and Chrome</h2>
<div class ="tableHolder2">
    <div class ="tableAccordian">
	   <div class ="tableRow"><div class ="p1"></div><div class ="p2"></div>
<div class ="p3"></div><div class ="p4"></div><div class ="p5"></div></div>
	   <div class ="tableRow"><div class ="p6"></div><div class ="p7"></div>
<div class ="p8"></div><div class ="p9"></div><div class ="p10"></div></div>
	   <div class ="tableRow"><div class ="p11"></div><div class ="p12"></div>
<div class ="p13"></div><div class ="p14"></div><div class ="p15"></div></div>
	   <div class ="tableRow"><div class ="p16"></div><div class ="p17"></div>
<div class ="p18"></div><div class ="p19"></div><div class ="p20"></div></div>
    </div>
</div>
<br>