Làm đẹp website thông qua các hiệu ứng CSS là một trong những cách mà nhiều bạn thiết kế web đang sử dụng hiện nay. Đặc biệt, hiệu ứng ánh sáng khi rê chuột vào ảnh có vẻ rất được các bạn ưa chuộng. Để tạo hiệu ứng ánh sáng khi di chuột ( light effect ) vào các ảnh bài viết trong theme Flatsome trên trang web WordPress của bạn, bạn có thể tận dụng CSS. Dưới đây, tôi sẽ hướng dẫn bạn cách thực hiện điều này một cách chi tiết
Bước 1: Đăng nhập vào trang quản trị WordPress của bạn.
Bước 2: Trong menu quản trị WordPress, di chuột vào “Giao diện” và chọn “Tùy chỉnh.”
Bước 3: Trong trình tùy chỉnh, tìm tùy chọn “Thêm CSS Tùy chỉnh” hoặc tương tự. Tùy chọn này có thể nằm ở các vị trí khác nhau tùy theo phiên bản cụ thể của theme Flatsome.
Bước 4: Bây giờ, bạn có thể sử dụng mã CSS sau để thêm hiệu ứng ánh sáng khi di chuột vào ảnh. Đảm bảo rằng bạn thêm mã CSS này vào tùy chọn CSS tùy chỉnh trong trình tùy chỉnh:
.
.product-small
.box-image:hover::before{-webkit-animation:shine .75s;animation:shine .75s}@-webkit-keyframes shine{100%{left:125%}}@keyframes shine{100%{left:125%}}
.product-small .box-image::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}
