how to animate scaling an image over time via webkit - css

Question

I have collection of images in a simple gallery that I want to transform from small to large smoothly on mouseover.
I am currently doing this by revealing the actual size of an image when the mouse is over but forcing it to a certain size when it is not and hiding the real size with display:none.
I want to include some webkit transformations to do this over a 1s period to improve the transitions. I understand webkit is to transform an element between two states however is there anyway I can make this happen.
I also want to avoid JavaScript.
.reveal a .preview
{
display: none;
}
.reveal a:hover .preview
{
display: block;
position: absolute;
z-index: 1;
}
.reveal img
{
background: #fff
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.reveal li
{
background: #eee;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.reveal .preview
{
border-color: #000;
width: auto;
height: auto;
}

Answer 1

without the html (ie jsfiddle) it's hard for me to insert the solution within your code.. but here is a generic solution http://jsfiddle.net/9QVae/2/
img
{
width:100px;
height:100px;
background:red;
transition:width 1s, height 1s;
-moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
-webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
-o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}
on hover:
img:hover
{
width:200px;
height:200px;
}
so the trick is to specify the css property you want to add an effect to (ie width)
then specify the duration of the event ie transition:width 1s; then you specify the final dimension under the :hover selector
note: transition does not work on IE