31 C
Hanoi
Thứ Tư, Tháng Bảy 17, 2024
spot_img

Hướng dẫn tạo hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome

Truy cập:

Chia sẻ:

Chào mừng các bạn đến với blog của mình! Hôm nay, chúng ta sẽ cùng nhau khám phá một chủ đề hấp dẫn trong lập trình web, đó là “Hướng dẫn tạo hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome”. Theme Flatsome nổi tiếng với thiết kế hiện đại, linh hoạt và đặc biệt là sự dễ dàng tùy chỉnh.

Trong bài viết này, mình sẽ chia sẻ với các bạn cách tận dụng sức mạnh của CSS để tạo ra một hiệu ứng ánh sáng tuyệt vời khi người dùng di chuột vào ảnh trong bài viết. Chúng ta sẽ bắt đầu bằng cách hiểu rõ về cấu trúc CSS của Flatsome, sau đó tùy chỉnh mã để đạt được kết quả mong muốn.

Bài viết này được tạo ra đặc biệt dành cho những bạn đang ở giai đoạn mới học làm website trên nền tảng WordPress, với mục tiêu làm cho quá trình tạo ra trang web trở nên dễ dàng hơn thông qua việc copy – paste mà không cần phải hiểu rõ mọi chi tiết. Vì vậy, mong rằng các bạn sẽ chú ý đến một số điều quan trọng dưới đây!

  • Nền tảng: WordPress (Chúng tôi khuyến khích việc sử dụng phiên bản WP 5 trở lên)
  • Theme: Flatsome
Hướng dẫn tạo hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome

Nếu bạn đang sử dụng theme Flatsome, đừng lo lắng, vì bài viết được thực hiện trên nền tảng này. Chỉ cần thực hiện theo hướng dẫn mà tôi cung cấp, bạn có thể dễ dàng copy – paste để thực hiện các thay đổi mong muốn. Những bạn sử dụng theme khác ngoài Flatsome có thể liên hệ trực tiếp để nhận hỗ trợ cá nhân.

Mục tiêu của chúng tôi là giúp bạn tiếp cận việc xây dựng trang web một cách linh hoạt và thuận tiện nhất, đặc biệt là khi sử dụng theme Flatsome. Hãy bắt đầu hành trình của bạn với sự tự tin, và nếu bạn gặp bất kỳ vấn đề nào, đừng ngần ngại liên hệ để nhận sự hỗ trợ tận tâm từ chúng tôi!

Bước 1: Sao chép CSS

Vui lòng sao chép toàn bộ đoạn mã CSS dưới đây một cách chính xác! Đảm bảo không bỏ sót bất kỳ phần nào để đạt được kết quả mong muốn.

Đoạn mã CSS này được thiết kế để tương tác với class .post-item .box-image. Điều này có nghĩa là bất kỳ bài viết nào trên trang web của bạn có hình ảnh đại diện, hiệu ứng sẽ được áp dụng tự động. Hãy đảm bảo rằng bạn thực hiện bước này một cách chính xác để đạt được kết quả mà bạn mong đợi!

.post-item .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, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  transition: left 0.75s ease-in-out;
}

.post-item .box-image:hover::before {
  left: 125%;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

Giải thích

Đoạn mã CSS trên được thiết kế để tạo hiệu ứng ánh sáng khi di chuột (hover) vào hình ảnh đại diện của bài viết trong website, với sự sử dụng của ::before pseudo-element. Dưới đây là giải thích chi tiết:

BẠN CHƯA ĐĂNG NHẬP

Hãy đăng nhập để xem nội dung này!

Bước 2: Dán CSS

Các bạn vào Giao diện –> Tùy biến –> Style –> Custom CSS. Dán toàn bộ đoạn CSS ở trên vào nhé!

Bước 3: Lưu và Trải Nghiệm Kết Quả

Sau khi đã thực hiện các chỉnh sửa, hãy nhớ lưu lại để áp dụng các thay đổi. Bạn có thể chọn tùy chọn “Save” hoặc “Lưu” tùy thuộc vào giao diện của trình soạn thảo bạn đang sử dụng.

Tiếp theo, hãy truy cập trang chủ hoặc trang lưu trữ bài viết để trải nghiệm trực tiếp sự thay đổi mà bạn vừa thực hiện. Hover chuột vào hình ảnh đại diện của bài viết và bạn sẽ nhận thấy hiệu ứng ánh sáng tinh tế mà bạn đã thêm vào. Hãy thưởng thức thành quả của công việc bạn vừa hoàn thành và đảm bảo rằng nó đáp ứng đúng như mong đợi của bạn!

Bài viết này hướng dẫn cách tạo hiệu ứng ánh sáng khi di chuột vào ảnh bài viết trong theme Flatsome trên WordPress. Đầu tiên, bạn cần sao chép đoạn mã CSS và thực hiện theo bước hướng dẫn. Sau đó, lưu lại và trải nghiệm kết quả trên trang chủ hoặc trang lưu trữ bài viết. Hiệu ứng ánh sáng sẽ tạo ra một trải nghiệm tốt hơn cho người đọc của bạn. Hãy áp dụng ngay để làm trang web của bạn trở nên thú vị hơn!

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của CongVietBlog để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy CongVietBlog trên Facebook.

0 0 đánh giá
Đánh giá
Công Việt Blog
Công Việt Bloghttps://congvietit.com
Chào các bạn, mình là Công Việt, mình đến từ kênh Youtube Công Việt Blog. Blog này hiểu đơn giản mình viết những thứ mình học được, áp dụng được và cung cấp những tài nguyên mà mình sử dụng, cũng là nơi để mình lưu trữ tài nguyên. Phần "Thành viên VIP" với gói chỉ 50k để giúp mình duy trì website mà thôi, hi vọng được sự ủng hộ của các bạn.
Theo dõi
Thông báo về
guest
0 Bình luận
Inline Feedbacks
View all comments
banner quang cao hostinger-congvietblog-congvietit
ma giam gia khi mua hosting vps congvietitcom

Bài viết liên quan

Hướng Dẫn Cài Đặt và Quản Lý Website WordPress Trên Hosting Của Hostinger

Trong thời đại số hiện nay, việc sở hữu một trang web cá nhân hay doanh nghiệp là...

4 Cách xóa các mã Shortcode không sử dụng khỏi WordPress

Shortcode — công cụ tiết kiệm thời gian tuyệt vời cho nhiều quản trị viên WordPress đang tìm...

Bài 01 – Giới thiệu về WordPress

WordPress là một hệ thống xuất bản blog viết bằng ngôn ngữ lập trình PHP và sử dụng...

Khắc phục lỗi download file Google Drive qua Woocommerce trong WordPress

Nếu bạn muốn làm site bán sản phẩm có thể Download bằng Wordpress, chắc là cũng nghĩ đến...
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x