Использование перехода при увеличении изображения не работает в хроме.
HTML:
<img src="foobar.png">
CSS
img
{
float: left;
margin-right: 10px;
border-radius: 10px;
width: 200px;
-webkit-transition: width 1s ease, height 1s ease;
}
img:hover
{
width: 100%;
}
Fiddle: http://jsfiddle.net/6Dk4D/
Что не так?
Он не будет работать с процентами. Кроме того, если вы хотите перейти height, вам нужно объявить его в стиле orignal img. Показанный здесь: http://jsfiddle.net/Skooljester/6Dk4D/1/ он работает, если вы укажете width в пикселях для зависания.
Изменить: если вы укажете первый width как процент, то второй может быть определен и с процентом, и все еще работать. Спасибо Тило
Вы также можете использовать трюк max-width. Установите высоту max-width на зависание, и первоначальная ширина изображения будет соблюдаться при переходе.