如何使用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> 

这是有效的，因为它在图像和文本框的父元素悬停时应用，如果将鼠标悬停在任何子元素上，也是如此。