Code CSS Hiệu Ứng Ánh Sáng Khi Di Chuột Vào Ảnh Sản Phẩm Và Bài Viết Theme Flatsome

5/5 - (1 bình chọn)

Chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn code css hiệu ứng ánh sáng khi di chuột vào ảnh sản phẩm và bài viết của theme flatsome, các theme khác thì các bạn check class nó và chỉ việc thay class thôi nhé. Chúng ta bắt đầu nào. Let’s go.

Các bước thêm CSS

Có nhiều cách để thêm css, các bạn có thể thêm css vào bằng 2 cách sau:

  • Tùy biến -> CSS bổ sung.
  • domain/wp-admin/theme-editor.php (Chỉnh sửa theme con nhé) -> style.css.

Dưới đây là đoạn code css hiệu ứng ánh sáng khi di chuột vào ảnh sản phẩm và bài viết:

.box-image::after {
            background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) repeat scroll 0 0;
            content: "";
            display: block;
            height: 100%;
            position: absolute;
            right: -75%;
            top: 0;
            transform: skewX(-25deg);
            width: 50%;
            z-index: 2;
        }
        .box-image:hover::after {
            animation: 0.8s ease 0s normal none 1 running fixedAnim;
            animation: 0.8s ease 0s normal none 1 running fixedAnim;
            -webkit-animation: 0.8s ease 0s normal none 1 running fixedAnim;
            -moz-animation: 0.8s ease 0s normal none 1 running fixedAnim;
        }
        @-webkit-keyframes fixedAnim {
            0% {
                right: 125%;
            }
            125% {
                right: 0;
            }
        }

        @-moz-keyframes fixedAnim {
            0% {
                right: 125%;
            }
            125% {
                right: 0;
            }
        }

        @keyframes fixedAnim {
            0% {
                right: 125%
            }
            125% {
                right: 0;
            }
        }

Tại class .box-image:hover::after có các thông số 0.8 – Đây là thời gian chạy hiệu ứng khi di chuột, các bạn có thể thay đổi nó.

Thành quả:

CODE CSS HIEU UNG ANH SANG KHI DI CHUOT VAO ANH SAN PHAM VA BAI VIET THEME FLATSOME - LINHMINAZ
Code CSS Hiệu Ứng Ánh Sáng Khi Di Chuột Vào Ảnh Sản Phẩm Và Bài Viết Theme Flatsome 10

Lời kết

Qua bài viết trên mình đã hướng dẫn

Trả lời