Making text block overlay cover the whole button


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.

Source: CSS – Stack Overflow

November 30, 2021
Category : News
Tags: css | html

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.