触发该部分时的波浪效果

Question

我想在参考部分为我的卡片制作动画。我想在卡片的一半上做出一种波浪效果，就像我在进入该页面的部分时在附加图像上“绘制”一样，如果您知道我的意思的话

<div class="row">
                    <div class="col-sm-4 col-12" data-aos="fade-right">
                        <div class="card">
                            <div class="layer">            
                            </div>
                            <div class="content">
                            <div class="image">
                                <a target="_blank" href="http://www..com">
                                    <img src="img/logo.png" alt="alt" class="img-fluid" >
                                </a>
                            </div>
                            </div>
                        </div>
                    </div>
.card { 
    position:relative;
    overflow:hidden;
    width:350px;
    margin:0 auto;
    background: white;
    padding:20px;
    box-sizing:border-box;
    text-align:center;
    box-shadow:0 10px 40px grey;
}
.card .layer {
    z-index:1;
    position:absolute;
    /* top:calc(100% - 2px); */
    top: 100%;
    height:100%;
    width:100%;
    left:0;
    background: var(--main-color);
    transition:0.5s; 
}
.card .content {
    z-index:2; 
    position:relative;
}  
.card:hover  .layer{
    top:0;
}
.card .content p {
    font-size:var(--font-size-tertiary);
    line-height:24px;
    color:#fff;    
}
.card .content .image {
    margin:0 auto;
    overflow:hidden;    
    /* filter: grayscale(100%);*/    
}
.card:hover + img{
    filter: none;
}
.layer:hover + img{
    filter: none;
}
.card .content .image:hover {
    filter: none;
    transition: 0.5s;    
}

我尝试搜索 youtube 和 google，但没有找到我的“问题”的答案

编辑：

Answer 1

.card::after {
background-image: url('https://i.ibb.co/89JM5yC/wave.png');
background-size: cover;
content: "";
position: absolute;
left: 0;
bottom: -100%;
height: 100%;
width: 100%;
transition:all 0.5s ease;
}

.card:hover::after{
  bottom:0;
}

这就是您想要实现的目标吗？抱歉回复晚了。

请参阅下面的小提琴

JSFIDDLE