top border not showing in middle div when i have 3 divs

Question

i am working on new project using html , css , bootstrap. I have a problem. i have made a box that has border all around it and when I hover on this box an image appear inside in box ;by default inside of box is white . when I copy that box code and paste it under it first box and do it again it shows me 3 div that is exactly what I want but I have a problem my middle box's top border does not shown. what can i do??

this is one of my boxes code

<div>
   <a class="text-decoration-none" href="">
      <div class="po-relative mb-2">
         <img src="images/lukas-blazek-GnvurwJsKaY-unsplash.jpg" alt=""class="img-fluid">
         <div class="po-absolute">
         </div>
      </div>
   </a>
</div>

and this is all the css's related to these boxes

.po-relative {
    position: relative;
    border: .5px solid #cecece;
}

.po-absolute {
    background-color: white;
    height: 176px;
    width: 266px;
    position: absolute;
    bottom: 0;
    transition: 250ms ease-in-out;
}

.po-absolute:hover {
    background-color: black;
    opacity: 20%;
}

and also I post an image about my problem