As we saw in the last post I wrote – some where under css3 – I think,
The CSS3 scaling is pretty sweet. I would recommend using a transition so the image expands or shrinks gradually.
I prefer the gradual scale. The red apple seems to pop up really fast with a jerking movement. You will notice that the
red-apple does not have the transition applied to the element.
img#apple
{
-webkit-transition: transform 1s ease; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: transform 1s ease; /* Firefox 4-15 */
-o-transition: transform 1s ease; /* Opera 10.50–12.00 */
transition: transform 1s ease; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
img#apple:hover,
img#red-apple:hover
{
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}