Блог

У меня есть следующий HTML:

 lt;button class="wheel-display-button"   lt;img src="variant.image"/gt;  lt;span class="wheel-display-base"gt;   lt;pgt;Brandlt;/pgt;  lt;/spangt;  lt;span class="wheel-display-overlay"gt;  lt;pgt;Modellt;/pgt;  lt;pgt;Sizelt;/pgt;  lt;spangt; lt;/buttongt;  

Я хочу сделать так, чтобы при наведении курсора мыши на кнопку информация в "wheel-display-overlay" классе была видна, занимала всю ширину и высоту кнопки и находилась поверх изображения.

Мой CSS выглядит следующим образом:

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