在圖像上使用縮放效果在前景上保留文本

-1

我有一個具有懸停效果的圖片庫。一旦用戶將鼠標懸停在圖像上，它就會使用css轉換。在圖像上使用縮放效果在前景上保留文本

transform: scale(1.1);

圖像看起來像這樣沒有懸停效果。

並且效果如圖所示。

正如你所看到的，它放大很好，但不知怎的，文本消失在背景中。我試過使用z-index，但這沒有效果。我如何將文字保留在前面？這裏是一個jsfiddle：https://jsfiddle.net/xk2us9q8/

來源

2016-09-26 Niels Peeren

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在[**堆棧片段**]（https：//開頭博客.stackoverflow.com/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

該文本可能需要'位置：相對'爲'z-index'來生效 –

增加了一個jsfiddle –

z-index需要定位值，而不是static生效。

只需將position:relative添加到文本。

.container { 
 
    width: 350px; 
 
    height: 350px; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
} 
 
p { 
 
    color: white; 
 
    width: 350px; 
 
    text-align: center; 
 
    font-size: 28px; 
 
    z-index: 100; 
 
    margin-top: -90px; 
 
    position: relative; 
 
} 
 
.dnnmedia_image { 
 
    width: 350px; 
 
    height: 350px; 
 
    transition: all .2s ease-in-out; 
 
    overflow: hidden; 
 
    object-fit: cover; 
 
} 
 
.dnnmedia_image:hover { 
 
    transform: scale(1.1); 
 
}

<div class="container"> 
 
    <img src="https://dummyimage.com/350x350/000/fff" class="dnnmedia_image" /> 
 
</div> 
 
<p> 
 
    Random text 
 
</p>

來源

2016-09-26 15:12:52

在圖像上使用縮放效果在前景上保留文本

回答

相關問題