使文本塊覆蓋覆蓋整個按鈕

Question

我有以下代碼。 現在覆蓋出現了，但它不在圖像的頂部 - 它從圖像下方開始。 我想讓它當我 hover 在按鈕上時， "wheel-display-overlay" class 中的信息是可見的，並且占據了按鈕的整個寬度和高度，並且位於圖像的頂部。

 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>

Answer 1

希望它是您正在尋找的：

 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>