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

March 5, 2022

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

>Solution :

What is happening here is, you have set your width and height in a box of position absolute, which does not affect the width and height of the parent, as a result is being cut off.

I moved the width and height to the position relative, and set the left,top,bottom on the position absolute element.

Here you go.

.po-relative {
    position: relative;
    border: .5px solid #cecece;
    height: 176px;
    width: 266px;
    margin: 10px auto;
}

.po-absolute {
    background-color: white;
    position: absolute;
    bottom: 0;
    top: 0 left:0 right:0 transition: 250ms ease-in-out;
}

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

<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>
<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>
<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>