Making text block overlay cover the whole button-CodePudding

I have the following HTML:

<button class="wheel-display-button" 
        <img src="variant.image"/>
        <span class="wheel-display-base">        
                <p>Brand</p>
        </span>
        <span class="wheel-display-overlay">
                <p>Model</p>
                <p>Size</p>
        <span>
</button>

I want to make it that when I hover over the button, the info in the "wheel-display-overlay" class is visible and takes up the whole width and height of the button and is on top of the image.

My CSS is as follows:

button.wheel-display-button {
  background-color: white;
  background-size: cover;
  border-color: black;
  display: inline-block;
  height: 400px;
  padding: 0px;
  width: 20%;
}

button.wheel-display-button:hover .wheel-display-base {
  display: none;
}

button.wheel-display-button .wheel-display-overlay {
  display: none;
}

button.wheel-display-button:hover .wheel-display-overlay {
  background: black
  color: white;
  display: inline-block;
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
}

Right now the overlay appears, but it's not on top of the image - it starts below the image.

CodePudding user response：

Hope it is what you are looking for.

button.wheel-display-button {
  background-color: white;
  background-size: cover;
  border-color: black;
  display: inline-block;
  height: 400px;
  padding: 0px;
  width: 20%;
  position:relative;
  
}

button.wheel-display-button:hover .wheel-display-base {
  display: none;
}

button.wheel-display-button .wheel-display-overlay {
  display: none;
}

button.wheel-display-button:hover .wheel-display-overlay {
  background: black
  color: white;
  display: inline-block;
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

}