css - 使用纯 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只能存在于能够生 child 的元素上。请参阅来自 MDN 的注释:

Note: The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

移动您的 ::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>