Подскажите, как сделать анимацию изображений, чтобы при наведение на одно изображение всплывает другое?

Question

[Вот сайт с этой анимацией][1] [1]: https://www.mikekus.com

Answer 1

попробуйте что-то такое может:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image</title>
    <style>
        .two-images {
            position: relative;
        }

        .two-images_first {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            transition: 1s;
        }

        .two-images_first:hover {
            opacity: 0;
            transform: scaleX(120%) scaleY(120%);
        }

        .two-images_second {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .two-images_text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            user-select: none;

            color: white;
            font-size: 20pt;
        }
    </style>
</head>
<body>
    <div class="two-images">
        <div class="two-images_first">
            <p class="two-images_text">
                first
            </p>
            <img src="https://assets.faceit-cdn.net/avatars/eb0afdaa-f9b3-453f-a010-c9d5bb797377_1609957930322.jpg">
        </div>
        <div class="two-images_second">
            <p class="two-images_text">
                second
            </p>
            <img src="https://yandex-images.clstorage.net/4wO91dn99/2844d16ZX/z3vCSoHOPeKeJC6AWXjJjGTS7HEH212n0-rh8wSfhdAyFMR1S61BQe-VQHYyzXxMCbEn7JXRPs2RE5cHP4_SCoZ2k1uxokTetiAujG1cpah4_sxNJ8sNu9qLvZ8J_qS5RxXcYAddudV_DOTbtwytifHMd83FwUa90B9z9wriizd3A8oubW7UXpaEZ9i5qH3UdD8U9UsePYqXSmA3ARY5MQu11c13OUFFM8CMW3eAbZnNJP8hXT0rjcDPh2qiDnP374fmVhXufGYWoDMk1XjFyKRn3FEnImmSe_bkXwWuvfETUc1RI63h1XOglC83sBk1oUwrJQmVk0V4999SoprDLxMT5s45NhBeaoB7gBVwQcCQi4ANSy7tuiv-uCuhVtHpz3HJ9XtpnY0_2BBDN5DtvXngb8m9Ae8ZUK8bmoZe10sjyxIOIULsXvI8f2g5yHmYtJOEXXM-6a7HRiyzKVbhhVeVsVn_vRFBVyj463N0rXFtOPedEZW_zaj7r062bpdPiy8i-hGq_PZCnLd8OXA5NNDrAOnXNqVOD3KU19lW9WVjaVEx6wmNEVPI-AdPILmJGWD_sc2JR4Hcq5tuqgorf2M7LnJNJnzWSgB3HJU4Yczg5wQNz8p11jfSXMORDgVtl5XJpRONFVnDQAzjq4DRqYEM1_EJPQ85yHuLMqL-i4-T53pabcZsnoq4-zCVFBV8EPcQ5Vu-pdIj9ljvmdJpyWdh2UGbSUERf0zUs2cY7QXV_EsRgXGLiSQbpxY60oMnA0d-kjUq1H46ZF_oiaT93LCXwGEf4q2u_2qsk20GWY2PNQ31gy2tAbuwCAPDeCFxgWQzuVl1hxkA3xtSKg5DTwf74tLlouBiiuDzJDFY9Rg4ExwVp24h2scKNJulFlnxw7UF3QNBQeV_zAhXe2wZlWU812F1RQMtHNcjYobWC_Nfn4JWjYJ0Po68b5wVUHUwzCO87ccSPd5rlvg7nYK8">
        </div>
    </div>
</body>

БЛОГ НА HUSL

Подскажите, как сделать анимацию изображений, чтобы при наведение на одно изображение всплывает другое?

Ответы (1 шт):