Pure CSS 3 Grid Image gallery

Works on Webkit(Chrome and Safari).
you can View the source code by clicking on Demo.

It is very simple to create such an effect with CSS3 transitions. The mouse over images are absolutely positioned and have an opacity of 0.On hover i am just changing the opacity and width height padding of the image. The CSS which does the magic is below.
Hope you like the example.

.imagesgrid .showonhover{
position:absolute;
-webkit-transition-property:width,height,padding;
-webkit-transition-duration:0.5s,0.5s,0.5s;
-webkit-transition-timing-function:ease,linear,ease-in-out;
-moz-transition-property:width,height,padding;
-moz-transition-duration:0.5s,0.5s,0.5s;
-moz-transition-timing-function:ease,linear,ease-in-out;
-o-transition-property:width,height,padding;
-o-transition-duration:0.5s,0.5s,0.5s;
-o-transition-timing-function:ease,linear,ease-in-out;
opacity:0;
}
.imagesgrid:hover .showonhover
{
width:272px;
height:272px;
padding:20px;
opacity:1;
margin:auto;
}