VietNetwork.Vn

Bạn có muốn làm mờ hình ảnh khi di chuột qua trong WordPress không?

Hoạt hình tăng dần hoặc giảm dần đơn giản khi người dùng di chuột qua hình ảnh có thể làm cho trang web của bạn hấp dẫn hơn. Nó cũng khuyến khích khách truy cập tương tác với nội dung của bạn, điều này có thể giữ họ trên trang web của bạn lâu hơn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm hiệu ứng hình ảnh mờ dần khi di chuột qua trong WordPress.

1. Tại sao làm mờ hình ảnh khi di chuột qua trong WordPress?

Hoạt ảnh là một cách dễ dàng để làm cho trang web của bạn thú vị hơn và thậm chí có thể thu hút sự chú ý của khách truy cập vào nội dung quan trọng nhất của trang, chẳng hạn như biểu trưng trang web hoặc lời kêu gọi hành động.

Có rất nhiều cách khác nhau để sử dụng hoạt hình CSS trong WordPress, nhưng việc thêm hiệu ứng di chuột vào hình ảnh đặc biệt hiệu quả. Hoạt ảnh mờ dần có nghĩa là hình ảnh của bạn sẽ từ từ xuất hiện hoặc biến mất khi khách truy cập di chuột qua chúng.

Điều này khuyến khích mọi người tương tác với hình ảnh của bạn và thậm chí có thể thêm yếu tố kể chuyện vào trang. Ví dụ: các hình ảnh khác nhau có thể mờ dần khi khách truy cập di chuyển quanh trang.

Không giống như một số hoạt ảnh khác, hình ảnh mờ dần khi hiệu ứng di chuột qua rất tinh tế nên sẽ không ảnh hưởng tiêu cực đến trải nghiệm đọc của khách truy cập hoặc bất kỳ hoạt động tối ưu hóa hình ảnh nào bạn đã thực hiện.

Như đã nói, hãy chỉ cho bạn cách thêm hiệu ứng mờ dần vào hình ảnh của bạn khi di chuột qua trong WordPress.

2. Thêm hình ảnh mờ dần khi di chuột vào tất cả các hình ảnh WordPress

Cách dễ nhất để thêm hiệu ứng mờ dần cho tất cả hình ảnh của bạn là sử dụng WPCode. Plugin miễn phí này cho phép bạn dễ dàng thêm mã tùy chỉnh trong WordPress mà không phải chỉnh sửa tệp chủ đề của mình.

Với WPCode, ngay cả những người mới bắt đầu cũng có thể chỉnh sửa mã trang web của họ mà không gặp rủi ro mắc lỗi và lỗi chính tả có thể gây ra nhiều  lỗi WordPress phổ biến.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về  cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy truy cập  Code Snippets » Add Snippet.


Tại đây, chỉ cần di chuột qua 'Thêm mã tùy chỉnh của bạn.'

Khi nó xuất hiện, nhấp vào 'Sử dụng đoạn trích.'


Để bắt đầu, hãy nhập tiêu đề cho đoạn mã tùy chỉnh. Đây có thể là bất kỳ thứ gì giúp bạn xác định đoạn trích trong bảng điều khiển WordPress.

Chúng tôi cần thêm CSS tùy chỉnh vào WordPress, vì vậy hãy mở trình đơn thả xuống 'Loại mã' và chọn 'Đoạn mã CSS'.


Trong trình chỉnh sửa mã, hãy thêm đoạn mã sau:
   
.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
Đoạn mã này sẽ làm mờ từng hình ảnh trong 2 giây khi người dùng di chuột qua hình ảnh đó. Để làm cho hình ảnh mờ dần chậm hơn, chỉ cần thay thế '2s easy' bằng một số cao hơn. Nếu bạn muốn làm cho hình ảnh mờ dần nhanh hơn, thì hãy sử dụng '1 giây dễ dàng' hoặc nhỏ hơn.

Bạn cũng có thể tăng hoặc giảm 'độ mờ' bằng cách thay đổi opacity:0.6dòng.

Nếu bạn thay đổi bất kỳ số nào trong số này thì hãy đảm bảo rằng bạn thay đổi chúng trên tất cả các thuộc tính (webkit, moz, ms và o), để hiệu ứng mờ dần trông giống nhau trên mọi trình duyệt.

Khi bạn hài lòng với đoạn trích, hãy cuộn đến phần 'Chèn'. WPCode có thể thêm mã của bạn vào các vị trí khác nhau, chẳng hạn như sau mỗi bài đăng, chỉ giao diện người dùng hoặc chỉ quản trị viên.

Để thêm hiệu ứng mờ dần cho tất cả hình ảnh của bạn, hãy nhấp vào 'Chèn tự động'. Sau đó, mở trình đơn thả xuống 'Vị trí' và chọn 'Tiêu đề toàn trang'.


Sau đó, bạn đã sẵn sàng cuộn lên đầu màn hình và nhấp vào nút chuyển đổi 'Không hoạt động' để nút này chuyển thành 'Hoạt động'.

Cuối cùng, nhấp vào 'Lưu đoạn mã' để làm cho đoạn mã CSS hoạt động.


Bây giờ, nếu bạn di chuột qua bất kỳ hình ảnh nào trên trang web WordPress của mình, bạn sẽ thấy hiệu ứng mờ dần đang hoạt động.

3. Thêm ảnh động mờ dần vào các trang riêng lẻ

Việc sử dụng hiệu ứng mờ dần cho từng hình ảnh có thể gây mất tập trung, đặc biệt nếu bạn đang chạy một trang web nhiếp ảnh, kho ảnh lưu trữ hoặc bất kỳ trang web nào khác có nhiều hình ảnh.

Với ý nghĩ đó, bạn có thể chỉ muốn sử dụng các hiệu ứng mờ dần trên một trang hoặc bài đăng cụ thể.

Tin vui là WPCode cho phép bạn tạo mã ngắn tùy chỉnh. Bạn có thể đặt mã ngắn này trên bất kỳ trang nào và WordPress sẽ chỉ hiển thị hiệu ứng mờ dần trên trang đó.

Để làm điều này, chỉ cần tạo một đoạn mã tùy chỉnh và thêm mã hoạt ảnh mờ dần theo quy trình tương tự được mô tả ở trên. Sau đó, nhấp vào nút 'Lưu đoạn trích'.


Sau đó, cuộn đến phần 'Chèn', nhưng lần này chọn 'Mã ngắn'.

Thao tác này tạo ra một mã ngắn mà bạn có thể thêm vào bất kỳ trang, bài đăng hoặc khu vực sẵn sàng cho tiện ích nào.


Sau đó, hãy tiếp tục và làm cho đoạn trích hoạt động theo quy trình tương tự được mô tả ở trên.

Giờ đây, bạn có thể truy cập bất kỳ trang, bài đăng hoặc khu vực sẵn sàng cho tiện ích nào và tạo khối 'Mã ngắn' mới. Sau đó, chỉ cần dán mã ngắn WPCode vào khối đó.


Để biết thêm thông tin về cách đặt mã ngắn, vui lòng xem hướng dẫn của chúng tôi về cách thêm mã ngắn trong WordPress.

Khi đã xong, hãy nhấp vào nút 'Cập nhật' hoặc 'Xuất bản' để làm cho mã ngắn hoạt động. Sau đó, bạn có thể truy cập trang, trang hoặc khu vực sẵn sàng cho tiện ích con đó để xem hiệu ứng mờ dần khi di chuột qua.

4. Thêm hình ảnh động mờ dần vào hình ảnh nổi bật

Một tùy chọn khác là thêm hoạt ảnh mờ dần vào hình ảnh nổi bật của bạn hoặc đăng hình thu nhỏ. Đây là những hình ảnh chính của bài đăng và chúng thường xuất hiện bên cạnh tiêu đề trên trang chủ, trang lưu trữ và các khu vực quan trọng khác trên trang web của bạn.

Bằng cách làm mờ các hình ảnh nổi bật khi di chuột qua, bạn có thể làm cho trang web của mình bắt mắt và hấp dẫn hơn mà không cần tạo hoạt ảnh cho từng hình ảnh trên blog hoặc trang web WordPress của bạn.

Để thêm hoạt ảnh mờ dần vào hình thu nhỏ của bài đăng, chỉ cần tạo một đoạn mã tùy chỉnh mới theo quy trình tương tự được mô tả ở trên.


Tuy nhiên, lần này hãy thêm đoạn mã sau vào trình chỉnh sửa:
   
img.wp-post-image:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
Sau đó, cuộn đến hộp 'Chèn' và chọn 'Chèn Tự động'. Sau đó, mở trình đơn thả xuống 'Vị trí' và chọn 'Tiêu đề toàn trang'.


Sau đó, bạn có thể tiếp tục và làm cho đoạn mã hoạt động bằng cách sử dụng quy trình tương tự được mô tả ở trên.

Giờ đây, bạn có thể di chuột qua bất kỳ hình ảnh nổi bật nào để xem hoạt ảnh mờ dần đang hoạt động.

Nếu bạn muốn thêm nhiều hiệu ứng di chuột qua hình ảnh hơn nữa, hãy xem hướng dẫn của chúng tôi về cách thêm hiệu ứng di chuột qua hình ảnh trong WordPress.

5. Phần thưởng: Tạo hiệu ứng cho bất kỳ hình ảnh, văn bản, nút nào, v.v.

Hiệu ứng mờ dần là một cách thú vị để làm cho hình ảnh thú vị hơn, nhưng có rất nhiều cách khác để sử dụng hoạt ảnh trong WordPress. Ví dụ: bạn có thể sử dụng hoạt ảnh hộp lật để hiển thị văn bản khi khách truy cập di chuột qua hình ảnh hoặc sử dụng hiệu ứng thu phóng để người dùng có thể khám phá ảnh chi tiết hơn.

Nếu bạn muốn thử các hiệu ứng khác nhau, thì SeedProd có hơn 40 hoạt ảnh mà bạn có thể thêm vào hình ảnh, văn bản, nút, video, v.v. Bạn thậm chí có thể tạo hiệu ứng động cho toàn bộ các phần và cột chỉ bằng một vài cú nhấp chuột.

Bên trong trình chỉnh sửa SeedProd, chỉ cần nhấp vào nội dung bạn muốn tạo hoạt ảnh, sau đó chọn tab 'Nâng cao' trong menu bên trái.


Sau đó, bạn có thể tiếp tục và nhấp để mở rộng phần 'Hiệu ứng hoạt hình'.

Sau đó, chỉ cần chọn một hoạt ảnh từ trình đơn thả xuống 'Hoạt ảnh đầu vào', bao gồm một loạt các hiệu ứng mờ dần khác nhau.


Để biết thêm thông tin, vui lòng xem hướng dẫn của chúng tôi về cách tạo trang đích bằng WordPress.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách làm mờ hình ảnh khi di chuột qua trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách chọn phần mềm thiết kế web tốt nhất và chuyên gia của chúng tôi chọn các plugin bật lên WordPress tốt nhất.