在悬停期间使用文本作为图像上的剪贴蒙版

Question

我正在尝试为图像创建悬停效果：

1. 标题文字被揭晓
2. 此标题文本充当图像上的剪贴蒙版

在 中，状态 1（无悬停）位于左侧。您刚刚看到了图像。状态 2（悬停）位于右侧。文本将显示为图像的剪贴蒙版，因此当悬停时您只能通过文本看到图像。

此文本将是指向不同页面的超链接

我已经尝试使用 css

background-clip

（如here所述）来完成这项工作，但我无法得到它，因此第一个状态只是图像，没有文本轮廓。

有人可以帮忙吗？

我真的很喜欢这些图像的整个网格，充当不同博客文章的缩略图！

谢谢你！

Answer 1

你的意思是这样吗？

有必要有一个具有相同背景的父div，并在悬停时隐藏它。

      .container {
        width: fit-content;
        background: url("https://images.pexels.com/photos/20316373/pexels-photo-20316373/free-photo-of-antigo-antepassados-anciao-arqueologia.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1")
          no-repeat;
      }
      .container:hover {
        background: none;
      }

      a {
        padding: 10px;
        height: 750px;
        width: 300px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 100px;
        position: relative;
        border: none;
        background: var(--i, transparent);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      a:hover {
        --i: url("https://images.pexels.com/photos/20316373/pexels-photo-20316373/free-photo-of-antigo-antepassados-anciao-arqueologia.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
      }

    <div class="container">
      <a target="_blank" href="https://www.google.com"> NOW SOME TEXT </a>
    </div>