Почему отсчет начинается с середины?

Question

[papabig]

https://jsfiddle.net/papabig/zj40dwjg
При ховере второе изображение накладывается с середины. Так же и пометки товара встают в середину, а не вверх изображения, как предполагалось. Можно, конечно, подвинуть отрицательным top, но я скорее ищу не решения, а хочу понять почему именно от середины.

Хотелось бы, чтоб было как на этом сайте https://wildwearshop.com/

Answer 1

[Виктор]

Т.к. элемент позиционируется от инлайнового элемента product-link.

Answer 2

[profesor08]

.product-link {
  position: relative;
  display:block;
  height:100%;
  width:100%;
}