CSS. Плавное увеличение height через hover

@Фаер · Регистрация: 09.12.2011

Author24 — интернет-сервис помощи студентам

Есть вот такой код CSS:

CSS

.photo{height:220px;
       width:280px;
       margin-top:10px;
       margin-left:10px;
       margin-right:10px;
       margin-bottom:10pxpx;
       -webkit-transition: width 0.8s;
       -moz-transition: width 0.8s;
       -o-transition: width 0.8s;
        transition: width 0.8s}
 
.photo:hover{height:250px;
             width:300px}

Подскажите как сделать, чтоб плавно увеличивался height(высота картинки). А то в ширину она плавно расходится, а в высоту скачком. Не порядок.

Добавлено через 17 минут
Всё, не надо, сам разобрался.

@Taatshi · 07.09.2013, 12:00

Фаер, дайте, пожалуйста, решение - может, кому и пригодится

@Фаер · 07.09.2013, 13:40 **[ТС]**

Taatshi, хм, чё-то я не подумал.

Решение, в общем-то, простое: следом за width добавляем атрибут height(через запятую, а то изменение размеров будет резким) во все transition:

CSS

.photo{height:220px;
       width:280px;
       margin-top:10px;
       margin-left:10px;
       margin-right:10px;
       margin-bottom:10px;
       -webkit-transition: width 0.8s, height 0.8s;
       -moz-transition: width 0.8s, height 0.8s;
       -o-transition: width 0.8s, height 0.8s;
       transition: width 0.8s, height 0.8s}
 
.photo:hover{height:250px;
             width:300px}

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	07.09.2013, 12:00	2
	Фаер, дайте, пожалуйста, решение - может, кому и пригодится 0

	07.09.2013, 13:40