Css 从实体覆盖层中剪下以显示下面的图像/元素

我有一个由许多图像组成的复杂网格。大多数图像都有不同的大小。我已经成功地创建了一个统一的覆盖，它为出现在悬停上的每个图像生成。设计的一部分需要一条线穿过覆盖层，显示下面的图片。看看这个，我需要什么

起初，我认为我可以使用底部边框创建一条线，并将其设置为透明以显示最底部的元素（即图像），但由于叠加的背景设置为#fff，因此透明度仅显示叠加的白色（DUH！）

有没有办法使用CSS来穿透覆盖层，让图像元素穿透

下面是HTML（上面的图像示例不包括“立即购买”）：

---

如果

.overlay

只需要有一个坚实的背景（

#fff

）。您可以尝试使用

box shadow

技巧。默认情况下，

.overlay

的

背景应该是透明的，我们需要一些内部元素（例如
：在
元素之前）来渲染标语，对于剩余的白色区域，该元素也应该有一个透明的背景，我们需要使用
box shadow
，使
spread
的值尽可能大：

.overlay:before {
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  bottom:42%;
  height:10px;
  border-radius:5px;
  box-shadow:0 0 0 100vw #fff;
}

请注意，
.overlay
的
背景
应设置回
透明
（或简单地将其删除）

.好的，我想我明白了。我确实需要
.tagline
和
.cta
，有没有一种方法可以包含两个内容？我可以做一些类似于
内容：'
测试@user3486605为什么需要将内容放在
：之前的
？请注意，
：before
仅用于呈现视觉外观，所有内容都应放在HTML代码中。抱歉，当您说“我们需要一些内部元素（例如：before元素）来呈现标语”时，我误解了，“重新阅读，我就像duh！你真是个天才！那完全奏效了！非常感谢你！我没有足够高的声望来投票支持你，但我会尽快投票支持你@用户3486605不客气，这只是一个使用
框影的简单技巧，每个人都可以学习。
* {
    box-sizing: border-box
}
.module {
    position: relative;
}
.module img {
    width: 100%;
    height: 100%;
    padding: 3px;
}
.overlay {
    position: absolute;
    background: #fff;
    text-align: center;
    z-index: 10;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    opacity: 0; 
}
.tagline,
.cta {
    position: absolute;
    left: 10px;
    right: 10px;
    opacity: 0;
}
.tagline {
    font-weight: bold;
    border-bottom: 2px solid black; /*Current Placeholder for the cut-out I need*/
    bottom: 42%;
}
.cta {
    top:75%;
}
.overlay:hover .tagline,
.overlay:hover .cta,
.overlay:hover {
    opacity: 1;
    -webkit-transition: .5s;
    transition: .5s;
}

.overlay:before {
  content:'';
  position:absolute;
  left:10px;
  right:10px;
  bottom:42%;
  height:10px;
  border-radius:5px;
  box-shadow:0 0 0 100vw #fff;
}