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

所有你需要的是改变单一的选择适用于悬停父图像元素的替代，像这样（改变的线被评论表示）：

.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>

这工作，因为它适用于当图像和文本框两者的父元素是HOV如果你把鼠标悬停在它的任何子元素上，也是如此。

Answer 2

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