Why does the countdown start from the middle?

Question

css

https://jsfiddle.net/papabig/zj40dwjg
On hover, the second image is overlaid from the middle. Also, the product labels are placed in the middle, and not at the top of the image, as expected. You can, of course, move the negative top, but I'm rather looking not for solutions, but I want to understand why it is from the middle.
I would like it to be like on this site https://wildwearshop.com/

Answer 1

Because the element is positioned from the inline product-link element.

Answer 2

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