html – Making text block overlay cover the whole button

html - Animation after toggling doesn't apply the second style

I have the following HTML:

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

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 link

Leave a reply

Please enter your comment!
Please enter your name here