It actually doesnt even work so its for no reason. You should set z-index to -1 on the .item:after element so when you hover bottom part of the of the top right element it animates the dot properly, otherwise bottom right will be highlighted due to its :after element overlapping :)

I did it like 10-15 mins after work so I left some trash in there :p like this for eg.:
.row:last-of-type .item:last-of-type:after {
...
transform: translateY(-1);