Making text block overlay cover the whole button

user_12238262 0
Viewed 51

I have the following code. Right now the overlay appears, but it's not on top of the image - it starts below the image. 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.

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%;
}
<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>

css html
1 Answers

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;

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

user_152886410
Related