Как поступить с translate?

Как можно при translate сдвинуть hidden элемент на его высоту ? Пояснения, имеем блок со скрытым содержимым которое скроллится при hover на высоту 100% но если высота разная то и работает не так как ожидается !
* { margin: 0; padding: 0: } .wrap { width: 500px; margin: 30px auto; display: flex; flex-direction: row; } .item { width: 250px; height: 250px; overflow: hidden; border: 4px double #ccc; margin: 10px; } .item1 { transition: transform 2s linear; height: 100%; } .item1 img { display: block; max-width: 100%; } .item:hover .item1 { transform: translate(0, -100%); }

Как можно исправить ситуацию ?

Ответ

Чтобы получить данный эффект:
добавляем transition на тэг img transform: translate(0, calc(-100% + 250px)); на .item:hover img - для прокрутки при наведении на окно. Чтобы вычислить высоту на которую нужно переместить img используем calc(-100% + 250px), где 250px - высота окна(.item)
* { margin: 0; padding: 0: } .wrap { width: 500px; margin: 30px auto; display: flex; flex-direction: row; } .item { width: 250px; height: 250px; overflow: hidden; border: 4px double #ccc; margin: 10px; } .item1 { height: 100%; } img { transition: transform 2s linear; } .item1 img { display: block; max-width: 100%; } .item:hover img { transform: translate(0, calc(-100% + 250px)); }