Как плавно изменить размер картинки в блоке?

Question

[kachurinets]

Продолжаю учиться верстке и хочу сделать такую штуку.
prntscr.com/jt2rq3

Изначально на миниатюре показывается только уголок картинки. Нужно чтобы при наведении блок плавно увеличивался и показывался весь размер картинки. Пробовал как-то делать через background-position, но в моем случае картинка должна лежать в Html, поэтому такой вариант не подходит.

Сейчас моя демка выглядит вот так.
https://codepen.io/anon/pen/QxEYxe

Подскажите, как реализовать такое?

Answer 1

[boga-net]

Если я вас правильно понял, то :

.product img {
  opacity: 0;
  width: 150%;
  transition: 1s all;
}
.product:hover img {
  opacity: 1;
  width: 100%;
}

https://jsfiddle.net/7ga63xep/1/

Чтобы была плавность - нужны числовые значения. У вас для картинки оно не стояло. Поэтому сначала мы сделали картинку шириной 150% ( можете выставить любое другое), а потом 100%

Answer 2

[Alexandr]

Добавить это?

.img-hide img {
  width: 100%;
}

Comments

[kachurinets]

не помогло, нужно как-то чтобы изначально картинка была обрезана.