CSS3 анимации - анимационная ширина изображения

Question

Я хотел бы уменьшить размер изображения, когда мышь нависает над ним. Я хотел бы использовать анимацию CSS3, если это возможно. Это то, что я сейчас делаю:

#logo-icon img { width: 80px; }; 
#logo-icon img:hover { width: 50px; transition: width 0.2s; }; 

При наведении указателя мыши на изображение, вместо этого перехода от ширины 80px шириной 50px, она переходит от ширины 0px шириной 50px.

Можно ли перевести его с 80 до 50 пикселей?

Answer 1

Try:

#logo-icon img { width: 80px; transition: width 0.2s;}; 
#logo-icon img:hover { width: 50px; }; 

http://jsfiddle.net/CxU5g/