圖片hover效果溢出

Question

我在一個網站上工作，制作了 4 張效果為 hover 的圖像。我的問題是漸變，它沒有覆蓋整個圖像，而是在它下面一點點任何解決方案

我試過溢出：隱藏； 卻什么也沒做

Answer 1

。容器 {

寬度：90%；

填充：45px；

邊距：100px 自動；

顯示：彈性；

彈性方向：行；

證明內容：居中； }

。盒子 {

position：親戚；

寬度：250px；

邊距：0px 10px；

盒子陰影：0 0 20px 2px rgba(0, 0, 0, 0.1);

過渡：0.3s； }

.box img {

邊界半徑：5px； }

.box:hover {

變換：比例（1.2）；

z-指數：2； }

.box img {

顯示：塊；

寬度：100%；

高度：100%；

背景大小：包含；

文本對齊：居中； }

.box h2 {

position：絕對；

頂部：0；

左：0；

寬度：100%；

高度：100%；

背景：rgba(0, 0, 0, 0.5);

白顏色;

顯示：彈性；

彈性方向：列；

對齊項目：居中；

證明內容：居中；

不透明度：0； }

.box h2:hover {

不透明度：1； }