HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner">
        <div class="product">
            <div class="soda" style="--url: url(./bg.png)">
            </div>
            <div class="soda" style="--url: url(./bg2.png)">
            </div>
        </div>
        <div class="rock">
            <img src="./rock1.png" alt="">
            <img src="./rock2.png" alt="">
            <img src="./rock3.png" alt="">
        </div>
    </div>
</body>
</html>

CSS

body {
    min-height: 100vh;
    margin: 0;
    background-image:
        repeating-linear-gradient(to right, transparent 0 150px, #0001 150px 151px),
        repeating-linear-gradient(to bottom, transparent 0 150px, #0001 150px 151px),
        linear-gradient(to right, #CDCDCDcc, #CDCDCDcc),
        url(./bg.jpg);
}

* {
    padding: 0;
    margin: 0;
}

.banner {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.product {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 170px;
    z-index: 2;
    width: 500px;
    transition: 0.7s;
}

.product .soda {
    position: absolute;
    bottom: 0;
    left: calc(50%);
    transform: translateX(-50%);
}

.soda {
    --left: 0px;
    background:
        var(--url) var(--left),
        url(./soda.png) 0 0;
    background-size: auto 100%;
    width: 280px;
    aspect-ratio: 2 / 4;
    background-blend-mode: multiply;
    transition: 0.8s;
    --svg-icon: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='400' height='769'%3E%3Cpath d='M0 0 C6.53 0 13.07 0 19.6 -0 C31.26 -0 42.92 -0 54.58 0 C65.09 0.01 75.59 0.01 86.09 0 C98.38 -0 110.68 -0 122.97 -0 C129.44 0 135.91 0 142.38 -0 C188.43 -0.02 188.43 -0.02 206.49 0.46 C207.63 0.48 208.77 0.5 209.95 0.52 C211.47 0.57 211.47 0.57 213.02 0.63 C214.3 0.67 214.3 0.67 215.6 0.7 C218.37 1.23 219.8 2.22 221.85 4.13 C222.84 8.71 222.35 13.01 220.48 17.26 C219.68 18.19 219.68 18.19 218.85 19.13 C218.19 19.13 217.53 ... ' fill='%23DBDBDB' transform='translate(47,46)'/%3E%3C/svg%3E");
    mask: var(--svg-icon) no-repeat;
    mask-size: 100% 100%;
    -webkit-mask: var(--svg-icon) no-repeat;
    -webkit-mask-size: 100% 100%;
}

.soda:nth-child(2) {
    opacity: 0;
}

.product:hover {
    bottom: 300px;
}

.product:hover .soda:nth-child(2) {
    opacity: 1;
    --left: 500px;
}

.product:hover .soda:nth-child(1) {
    opacity: 0;
    --left: 500px;
}

.rock {
    position: absolute;
    inset: 0 0 0 0;
    width: 100%;
    pointer-events: none;
}

.rock img:nth-child(1) {
    position: absolute;
    height: 170px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    transition: 0.7s;
    z-index: 1;
}

.rock img:nth-child(2) {
    position: absolute;
    height: 50%;
    left: 0;
    bottom: 0;
    transition: 0.7s;
}

.rock img:nth-child(3) {
    position: absolute;
    height: 100%;
    right: 0;
    bottom: -100px;
    rotate: -25deg;
    transition: 0.7s;
}

.banner:has(.product:hover) .rock img:nth-child(1) {
    transform: translateX(-50%) translateY(50px);
}

.banner:has(.product:hover) .rock img:nth-child(2) {
    transform: translateX(-100px) translateY(100px);
}

.banner:has(.product:hover) .rock img:nth-child(3) {
    transform: translateX(100px) translateY(100px);
}

@media screen and (max-width: 1023px) {

    .soda {
        width: 400px;
    }
}

@media screen and (max-width: 767px) {
    .soda {
        width: 250px;
    }

    header img {
        display: none;
    }

    header .author {
        width: 100%;
    }

}