使用纯 CSS 对悬停的简单窗帘效果

Question

我正在尝试制作一个简单的窗帘效果。当我们越过卡片（在本例中为图像）时，在过渡的 1 秒内，从该图像的顶部到底部有一个半透明层。我以前已经做过，现在我不明白我错过了什么。代码很简单，应该可以工作，我需要一个简单的解决方案，任何 javascript 或高级技术都是必要的。

Codepen 链接：https://codepen.io/jorgemonte/pen/rKvmpo

代码如下：

HTML：

<a class="card" href="">
<img class="image" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
</a>

CSS：

.card{
  display:inline-block;
  position:relative;
  border:1px solid black;
}

.image:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.3);
    opacity:0;
    visibility:hidden;
    transform-origin:top center;
    transform: scale3d(1, 0, 1);
    transition:1s;
}

.card:hover .image:before{
    opacity:1;
    transform: scale3d(1, 1, 1);
    visibility: visible;
}

Answer 1

CSS pseudo-elements ::before 和 ::after 只能存在于能够有子元素的元素上。请参阅 MDN 的此注释：

注意：::before和::after生成的伪元素是 包含在元素的格式框中，因此不适用于 替换元素，例如 <img>，或替换为 <br> 元素。

将您的 ::before 移动到 .card div 可解决此问题：

.card {
  display: inline-block;
  position: relative;
  border: 1px solid black;
}

.card::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: scale3d(1, 0, 1);
  transition: 1s;
}

.card:hover::before {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  visibility: visible;
}

<a class="card" href="">
  <img class="image" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
</a>