如何使用css添加文本疊加的圖像縮放效果

Question

我試圖使用css獲得一個效果，我保持90％正確，但每次我嘗試不同的東西，它導致其他地方的另一個問題。

我想做什么：

1. 將圖像放大鼠標懸停
2. 讓文本保持原位而不是縮放

問題：當鼠標移過文本覆蓋時，懸停工作正常除外（因為效果在img：hover上。我實際上希望文本覆蓋對眼睛可見但是對於鼠標覆蓋是透明的

這是我的小提琴： https ： //jsfiddle.net/knrrrfxo/

我已經嘗試使圖像成為背景圖像，但是這會產生一個響應大小調整的問題列表，這些問題也無法正常工作。

碼：

<style>
.tile-wrapper {
    margin:0;
    padding:0;
    overflow: hidden;
    position: relative;
}
.new-arrivals-link {
    line-height: 0;
}
.new-arrivals-link img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.new-arrivals-link img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.new-arrivals-link img:hover {
    opacity: 0.8;
}
.tile-wrapper .text-overlay {
    position: absolute;
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.tile-wrapper .text-overlay h2 {
    color: white;
    font-size: 60px;
    line-height: 74px;
    margin: 0 0 10px;
}
.tile-wrapper .text-overlay p {
    color: white;
    font-size: 28px;
}
</style>
<div class="tile-wrapper">
        <a href="#" itemprop="url" class="new-arrivals-link">
          <img src="https://cdn.shopify.com/s/files/1/1307/5753/files/new-arrivals-tab.jpg?6713767595666642894" width="100%" alt="New Arrivals">
          <div class="text-overlay">
            <h2>NEW<br>ARRIVALS</h2>
            <p>Shop Now</p>
          </div>
        </a>
</div>

Answer 1

你可以設置pointer-events: none; 在.text-overlay div上。

Answer 2

您只需要更改單個選擇器以應用於父級而不是像素的懸停，就像這樣（更改的行由注釋指示）：

 .tile-wrapper { margin:0; padding:0; overflow: hidden; position: relative; } .new-arrivals-link { line-height: 0; } .new-arrivals-link img { -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; } .new-arrivals-link:hover img { /* this line has been changed */ -webkit-transform:scale(1.25); /* Safari and Chrome */ -moz-transform:scale(1.25); /* Firefox */ -ms-transform:scale(1.25); /* IE 9 */ -o-transform:scale(1.25); /* Opera */ transform:scale(1.25); } .new-arrivals-link img:hover { opacity: 0.8; } .tile-wrapper .text-overlay { position: absolute; width: 50%; height: 50%; overflow: auto; margin: auto; top: 0; left: 0; bottom: 0; right: 0; text-align: center; } .tile-wrapper .text-overlay h2 { color: white; font-size: 60px; line-height: 74px; margin: 0 0 10px; } .tile-wrapper .text-overlay p { color: white; font-size: 28px; } 

 <div class="tile-wrapper"> <a href="#" itemprop="url" class="new-arrivals-link"> <img src="https://cdn.shopify.com/s/files/1/1307/5753/files/new-arrivals-tab.jpg?6713767595666642894" width="100%" alt="New Arrivals"> <div class="text-overlay"> <h2>NEW<br>ARRIVALS</h2> <p>Shop Now</p> </div> </a> </div> 

這是有效的，因為它在圖像和文本框的父元素懸停時應用，如果將鼠標懸停在任何子元素上，也是如此。