画像に白いもやをつけたい

Question

実現したいこと

https://www.gorakadan.com/fuji/

上記URLのサイトのような、スクロールしたときの画像の現れ方を再現しようとしているのですが、つまずいています。
もやのようなものを再現するにはどうすればいいでしょうか？

発生している問題・分からないこと

画像を下から上に表示させることはできたのですが、
もやの再現方法が分かりません。

該当のソースコード

<figure class="reveal-container"><img src="画像パス"></figure>

.reveal-container {
    position: relative;
    overflow: hidden;
}


.reveal-container img {
    width: 100%;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 2s cubic-bezier(0.19,1,0.22,1);
}


.reveal-container::after {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -150px;
    width: 120%;
    height: 300px;

    background:
        radial-gradient(circle at 20% 60%, rgba(255,255,255,.8) 0%, transparent 60%),
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.7) 0%, transparent 60%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.8) 0%, transparent 60%);
    
    filter: blur(20px);
    opacity: .9;

    transform: translateY(0);
    transition: transform 2s cubic-bezier(0.19,1,0.22,1);

    animation: steam 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}


@keyframes steam {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-30px) translateX(20px); }
    100% { transform: translateY(0) translateX(0); }
}


.reveal-container.is-animated img {
    clip-path: inset(0 0 0 0);
}

.reveal-container.is-animated::after {
    transform: translateY(-120%);
}

jQuery(function($) {
    $(window).on('scroll load', function() {
        $('.reveal-container').each(function() {
            var targetPos = $(this).offset().top;
            var scrollPos = $(window).scrollTop();
            var windowHeight = $(window).height();

            if (scrollPos > targetPos - windowHeight + (windowHeight * 0.2)) {
                $(this).addClass('is-animated');
            }
        });
    });
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

もやが再現しにくく動きも画像においつかない感じになってしまいます。

補足

特になし

Answer 1

こういうことでしょうか？
ホバーをトリガーにしたサンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/tx1c4n60/

.reveal-container {
    width: max-content;
    background-color: white;

    img {
        mask-image:
            linear-gradient(transparent 33%, white 66%),
            radial-gradient(circle at 20% 33%, white 0%, transparent 30%),
            radial-gradient(circle at 80% 35%, white 0%, transparent 30%),
            radial-gradient(circle at 50% 30%, white 0%, transparent 30%);
        mask-position: 0% 0%;
        mask-composite: subtract, add, add, add;
        mask-size: 300% 300%;
        transition: all 1s;

        &:hover {
            mask-position: 100% 100%;
        }
    }
}

Comments

[keel]

まさしくそんな感じです！
ありがとうございます！