-1

Problem: I am trying to make an overlay appear when a list item is hovered upon.

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 header which is in gray color. I only want the red overlay division to appear on the gray list item.

HTML page screenshot

Here's my code:

.* {
    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;
}
<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>

Would anybody know how to do this?

Thanks,

user3611038
  • 11
  • 3
  • Didn't understood clearly. Is this what you were trying to achieve? ? https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity – Krishnadas PC Sep 27 '18 at 09:33

1 Answers1

1

Add position: relative to .price .header. Adding position: relative makes children with position: absolute position themselves relative to the parent. Otherwise any element with position: absolute positions itself relative to the window object.

vikdotdev
  • 105
  • 1
  • 1
  • 10