Tất cả chúng ta đều biết khả năng tùy chỉnh vô hạn với Trình tạo trang web Elementor như thế nào. Với sự tùy chỉnh đó, chúng tôi có thể nâng cao trải nghiệm người dùng và sáng tạo trong những gì chúng tôi tạo ra.
Hiệu ứng Logo Swap on Hover là khi người dùng đặt con trỏ vào logo được đặt trên trang web của bạn, nó sẽ tự động thay đổi các chi tiết của nó, tức là màu sắc, hình dạng hoặc đường viền. Trong hướng dẫn này, chúng ta sẽ hiểu cách tạo hoán đổi logo trên hiệu ứng di chuột với Elementor .
Cách tạo Biểu trưng hoán đổi trên Hiệu ứng Di chuột bằng Elementor
Bạn đã biết hiệu ứng là gì và có ý tưởng trong đầu về những gì bạn muốn tạo ra, hãy tiếp tục và xem cách thực hiện.
Để bắt đầu, hãy thêm một phần bên trong cho các widget.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờ
Tiếp theo, bạn cần thêm một cột vào phần đã tạo ban đầu. Đối với hướng dẫn này, chúng ta sẽ đi với cấu trúc hai cột .
Sau đó kéo và thả tiện ích hình ảnh vào cột bạn đã tạo.
Để hiệu ứng hoạt động, bạn sẽ cần hai hình ảnh. Một sẽ được hiển thị bình thường, trong khi cái còn lại sẽ được hiển thị khi người dùng đặt con trỏ của họ.
Bạn có thể sử dụng hai biến thể của cùng một logo hoặc sử dụng hai hình ảnh hoàn toàn khác nhau, khả năng là vô hạn.
Sau khi chọn hình ảnh, trong trường CSS tùy chỉnh, hãy dán mã CSS sau để làm cho hoạt động của hiệu ứng hoán đổi logo khi di chuột.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}Và thực hiện! Xuất bản trang của bạn để xem trước và xem hiệu ứng như thế nào trên trang web của bạn. Hãy quay lại để thực hiện bất kỳ thay đổi nào nếu bạn muốn.
Đây là cách bạn có thể tạo hiệu ứng Hoán đổi Logo khi Di chuột với Elementor . Đảm bảo tham gia với chúng tôi trên Facebook  và Twitter của chúng tôi để được cập nhật về các bài đăng của chúng tôi.
