Wave effect on triggering the section

Question

I would like to make an animation to my cards in reference section. I want to make an effect of kinda waves to the half of card like i "draw" on attached image when you enter the section of that page if you know what I mean

<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;    
}

I tried searching the youtube and google and did not find an answer for my "problem"

Edit: Effect I would like to make

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;
}

Is this what you are trying to achieve?Sorry for late reply.

See below fiddle

JSFIDDLE