Get html overlay on image in li

I am new to html and i am trying to get a division overlay on a list item hover. However the overlay appears in the full width of the screen when i want it only on the list item as class 'price' which is in gray color. I only want the red overlay division to appear on the gray list item.

Here's my code:

HTML -

<div class="columns">
<ul class="price">
<li class="header"> li One 
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/> 

<div class="overlay">
<span class="closebutton"> 
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li One description
</div>
</div>
</li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header"> li One 
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/> 

<div class="overlay">
<span class="closebutton"> 
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li two description
</div>
</div>
</li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header"> li three
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/> 

<div class="overlay">
<span class="closebutton"> 
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li three description
</div>
</div>
</li>
</ul>
</div>

CSS -

.* {
    box-sizing: border-box;
}

.columns {
    float: left;
    width: 33.3%;
    padding: 8px;
}

.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F9423A;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.price:hover {
    /*box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)*/
    background-color: #002A3A;
}


.price:hover .overlay {
    height: 20%;
}

.price .header {
    background-color: #ccd4d7;
    color: #002A3A;
    align-content: center; 
    font-size: 25px;
    height: 100%;
}

.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}

Would anybody know how to do this?

Thanks,