Đôi khi bạn vào trang sản phẩm , Nhất là sản phẩm có tấm hình quá dài bạn chọn nó tự nhiên tấm hình trượt từ dưới lên
Hôm nay tớ share bạn cách làm nhé
Hình sản phẩm trượt khi chọn vào hình trong wordpress
Thống kê bài viết
Để dễ hình dung bạn thử bấm vào link này Website làm đẹp Spa , thẩm mỹ viện đẹp theme Flatsome
và kéo chuột vào tấm hình bạn sẽ thấy hình trượt từ dưới lên rất đẹp đúng ko !
CÓ THỂ BẠN QUAN TÂM
- Phần 3 : Các hook trong wordpress – Hook trong blog post 09/2023
- Fix lỗi icon loading không tự mất trong Contact Form 7 09/2023
- Đếm số lượng bài đăng trong một danh mục hiển thị bằng shortcode 09/2023
- Button follow , contact liên hệ đẹp 09/2023
- Vietnix giảm giá 50% TRỌN ĐỜI dịch vụ Hosting 09/2023
- Cách tạo gợi ý đánh giá sản phẩm có sẳn cho woocommerce trong wordpress 09/2023
OK bắt tay vào việc này
Code css Hình sản phẩm trượt khi chọn vào hình trong wordpress
vào custom css dán đoạn code sau
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.single-product .woocommerce-product-gallery { margin-top: 0; height: 1000px; overflow: hidden; } .woocommerce-product-gallery { transition: opacity 0.5s ease-in-out 0s; border: 1px solid #ececec; border-radius: 4px; margin-top: 20px; } .single-product .woocommerce-product-gallery img { max-width: 100%; transition-duration: 5s; width: 100%; transition: ease all 5s; transform: translateZ(0); margin: 0 auto; } .single-product .woocommerce-product-gallery:hover img { transform: translate(0,-50%); transition-timing-function: linear; transition-duration: 5s; } |
Xong nhé 🙂 đơn giản đúng ko bạn , Chúc bạn thành công !