Question

我正在尝试使用css获得效果，我保持90％正确，但每次尝试不同的东西时，都会导致其他问题。

我想做什么：

让图像放大鼠标悬停
让文字保持原位而不是缩放

问题：当鼠标移过文本覆盖时，悬停工作正常除外（因为效果在img：hover上。我实际上希望文本覆盖对眼睛可见但对鼠标来说是透明的

我已尝试将图片制作为背景图片，但这会产生另一个问题列表，其中包含响应式尺寸调整，但也无法使用。

代码：

<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; div上设置.text-overlay。

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>

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

如何使用css添加文本叠加的图像缩放效果

2 个答案: