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

.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;
}

.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

.elementor-4284 .elementor-element.elementor-element-4eb57a0:hover > .elementor-element-populated:hover {
   background-position: bottom center!important;
   transition: background-position 2s linear 0s;
}

Leave a Reply