ボタンをhoverした際に対応する画像を切り替えたい

Question

<style>
.img-area {
  position: relative;
  overflow: hidden;
  background-size: cover;
  height: 42vw;
  background-image: url("images/img_a.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

<div class="link-wrap">
            <div class="link-btn">
                <ul>
                    <li>
                        <a href="#" data-image="images/img_a.jpg">
                            <dl>
                                <dt>A部品</dt>
                                <dd>eng A</dd>
                            </dl>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-image="images/img_b.jpg">
                            <dl>
                                <dt>B部品</dt>
                                <dd>eng B</dd>
                            </dl>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-image="images/img_c.jpg">
                            <dl>
                                <dt>C部品</dt>
                                <dd>eng C</dd>
                            </dl>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-image="images/img_c.jpg">
                            <dl>
                                <dt>D部品</dt>
                                <dd>eng D</dd>
                            </dl>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="photo">
                <div class="img-area"></div>
            </div>
        </div>

$(document).ready(function () {
            // Default image
            var defaultImage = 'images/img_a.jpg';

            // Change image on button hover with smooth fade effect
            $('.link-btn a').hover(function () {
                var imageUrl = $(this).data('image') || defaultImage;

                // Fade in the new image
                $('.img-area').fadeOut(250, function () {
                    $(this).css('background-image', 'url(' + imageUrl + ')').fadeIn(250, function () {
                        $(this).addClass('hovered'); // Add class after fadeIn completes
                    });
                });
            }, function () {
                // Hover out (do nothing to keep the last hovered image)
            });
        });

上記のようにして、hoverの際に画像を切り替えする動作をなんとか実装できました。
しかし、もうひとつ動きを加えたいのですが、方法がわかりません。
.hoveredを.img-areaに追加して、cssでなんとかしようとしましたが、うまくいかず、

参考サイトの「Our Business」のように、

https://www.fujibo.co.jp/
hoverしたらふわっと画像を下からfadeInをさせたいです。

ご教授ください。

Answer 1

background-image を切替るという実装をししていますが、それだと、
前の画像がfadeout
同時に次の画像が下からfadein
というように動作を実現しようとすると複雑になります。

4つの画像のimg要素を 、position: absoluteで重ねて配置しておいて、jsでfadeoutしたい要素、fadeinしたい要素にそれぞれクラスを付加するという手法がシンプルだと思います。
リンク先もそのようにしています。fadeoutしたい要素にis-outクラス adeinしたい要素にis-showクラス、を付与してます。
CSSの設定は開発者ツールで確認できますので、それを参考にしてみてはどうでしょうか。