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

我想做一个简单的窗帘效果。当我们超过卡(在这种情况下,一个图像),有一个半透明层从顶部到底部的图像,在1秒的过渡。我以前已经做过了,现在我不明白我缺少了什么。代码很简单,应该工作,我需要一个简单的解决方案,任何JavaScript或高级技术是必要的。

代码笔链接: 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;
}