CSS cuộn hình ảnh khi rê chuột vào hình ảnh

Ví dụ đoạn CSS cuộn hình ảnh khi rê chuột vào hình ảnh

/* Cài đặt ảnh nền cho cột với background image */
.elementor-704 .elementor-element.elementor-element-XXXXXXXX:not(.elementor-motion-effects-element-type-background) > .elementor-column-wrap, 
.elementor-704 .elementor-element.elementor-element-XXXXXXXX > .elementor-column-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url("https://hoanggiangnam.com/wp-content/uploads/2020/04/neve-perfume-shop-10.jpg");
    margin-left: auto!important;
    margin-right: auto!important;
    background-position: top center;
    background-size: 100% auto!important;
    height: 100%;
    background-repeat: no-repeat;
}

/* Thay đổi vị trí nền khi hover vào cột */
.elementor-704 .elementor-element.elementor-element-XXXXXXXX:not(.elementor-motion-effects-element-type-background) > .elementor-column-wrap:hover {
    background-position: bottom center!important;
    transition: background-position 4s linear 0s;
}

Nếu trong elementor hoặc flatsome thì bạn chỉ cần chú ý đoạn css như dưới. ví dụ như class dưới thì mình chỉ định khi rê chuột vào class .elementor-4284 .elementor-element.elementor-element-4eb57a0:hover > .elementor-element-populated sẽ cuộn xuống

/* Thay đổi vị trí nền khi hover vào phần tử */
.elementor-4284 .elementor-element.elementor-element-4eb57a0:hover > .elementor-element-populated:hover {
    background-position: bottom center!important; /* Di chuyển nền xuống vị trí bottom center */
    transition: background-position 2s linear 0s; /* Thêm hiệu ứng chuyển động trong 2 giây */
}