Why do all subsequent pictures lose their circle when the hovering block is rotated?

Question

css

Hello, I have a question.
There are 4 blocks, each block has the following code (in addition to container-row-col.col-xl-3):

.d-flex.flex-column.align-items-center.border.border-primary.pt-4.pb-4.rounded
          .w-150px.h-150px.mb-15px.overflow-hidden.position-relative.transition-duration-2s.rotateY-hover-180deg.bg-primary-hover.opacity-hover-img-none.opacity-hover-link.text-decoration-none-hover-link.text-white-hover-link.rounded-circle.rounded-circle-hover
           img(src="img/pages/case/best-team/1.jpg" alt="First person of the best team").position-absolute.top-0.left-0.bottom-0.right-0.w-100.z-none.opacity.opacity-hover-none.transition-duration-2s
           a(href="#").position-absolute.w-100.h-100.text-white.bg-primary.d-flex.fs-36px.justify-content-center.align-items-center.text-uppercase.text-decoration-none.font-weight-bold.z-1.opacity-none.rotateY-180deg.transition-duration-2s More

// TODO: z-index styles
  .z-none
    z-index 0
  .z-1
    z-index 1
  // TODO: opacity styles
  .opacity-none
    opacity 0
  .opacity
    opacity 1
  .opacity-hover-none:hover
    opacity 0
  .opacity-hover-img-none:hover > img
    opacity 0
  .opacity-hover-link:hover > a
    opacity 1
  // TODO: animation duration styles
  .transition-duration-2s
    transition-duration 2s
  // TODO: rotate styles
  .rotateY
    transform rotateY(0deg)
  .rotateY-180deg
    transform rotateY(180deg)
  .rotateY-hover-180deg:hover
    transform rotateY(180deg)
.top-0
    top 0
  .left-0
    left 0
  .right-0
    right 0
  .bottom-0
    bottom 0
  .text-white-hover-link:hover > a:hover
    color white

All other styles are taken from bootstrap.
The problem is that when you hover over the first block, at the picture, during its rotation by 180 degrees, which takes 2 seconds, the pictures of the next blocks lose their circumference during this effect, that is, they change into squares. How can this problem be fixed?
PS
I am making a website using the bootstrap methodology, which means that there is one property per class, for example w-150px is respectively width: 150px, w-xl-60px is width 60px for devices 1200+.
PPS
Please do not talk about the class naming methodology, I explained above. If you can't figure out the code (I understand that there are a lot of classes), please don't talk (the code is about nothing, etc.).
I need a solution to this problem, not a discussion of how I typeset, you still don't know that even looking at this code.

Answer 1

Problem solved:
this happened because the images had position-absolute.
Removing it, of course, did not solve the problem, so I went to the link, it was far below and therefore I had to add two classes to it:
position-absolute top-0.
As a result, it turns out that our link is absolute and always on top. This allowed us to solve the problem with the loss of the circle when animating the picture for another block.
Now everything is super, the animation works, the circle is not lost, thank you all.