Смещение изображения пополам?

Question

У меня есть золотая коробка, я хочу, чтобы изображение внутри золотой коробки было центрировано на половину от золотой коробки, так что центральная точка изображения сидит в верхней части золотой коробки.

Как коробка продукта с изображением сидела вверху.

JSFiddle

Я пробовал:

margin-top: -50%; 

Но не повезло.

Answer 1

Как насчет чего-то подобного?

https://jsfiddle.net/v992pqmw/

transform: translateY(-50%);