Hiệu ứng di chuột từ lâu đã là một trong những cách dễ nhất để thêm yếu tố tương tác vào trang web. Thông thường nhất, chúng tôi thấy chúng được sử dụng để làm nổi bật các nút hoặc liên kết văn bản. Nhưng việc sử dụng chúng có thể vượt xa những điều cơ bản
Một lĩnh vực mà hiệu ứng di chuột có thể đặc biệt mạnh mẽ là khi chúng được áp dụng cho hình ảnh. Cho dù đó là một phần của bố cục thẻ nhỏ hay hình ảnh anh hùng lớn, hiệu ứng phù hợp có thể tạo ra tác động lớn
Hôm nay, chúng tôi sẽ chỉ cho bạn một số cách sáng tạo mà các nhà thiết kế đang tích hợp hiệu ứng di chuột vào hình ảnh. Họ sẽ chứng minh làm thế nào chúng ta có thể thêm gia vị cho các dự án của riêng mình một cách ấn tượng
Hiệu ứng ảnh trên Hover của Alvaro Montoro
Việc sử dụng CSS và JS thông minh này sao chép hình ảnh và xếp chúng lên nhau. Từ đó, các bộ lọc CSS được thêm riêng vào từng hình ảnh. Kỹ thuật này tạo ra các hiệu ứng chất lượng điện ảnh mà khó có thể đạt được
Xem các hiệu ứng Pen Photo khi di chuột bằng JS và CSS3 của Alvaro Montoro
Hiệu ứng hình ảnh nhanh và mạnh mẽ của kw7oe
Điều tuyệt vời về bộ sưu tập hiệu ứng di chuột này là chúng mang lại sự hài lòng tức thì. Nhưng tốc độ đó không lấy đi tiềm năng của họ. Đặc biệt lưu ý ở đây là các hiệu ứng bộ lọc CSS3, vì chúng làm cho hình ảnh màu nâu đỏ và thang độ xám có đầy đủ màu sắc khi di chuột
Xem Hiệu ứng di chuột hình ảnh bút của kw7oe
Hình ảnh Di chuột với Tiêu đề Trượt ra bằng LittleSnippets
Sự kết hợp của hộp chứa phụ đề lệch, kiểu chữ sắc nét và hoạt ảnh nhanh là mạnh mẽ. Nó cũng gợi nhớ đến phần mở đầu của một chương trình truyền hình. Thật ngạc nhiên, phần lớn công việc chỉ do CSS thực hiện
Xem Bút #1104 – Hình ảnh di chuột với tiêu đề trượt ra bởi LittleSnippets. mạng lưới
Hiển thị thẻ của bạn Hiệu ứng hình ảnh của Bruno Rodrigues
Đây là một đoạn trích gợi nhớ đến ai đó đang mở một ván bài cho mọi người xem. Nhưng trong trường hợp này, có vẻ như nó sẽ là một hiệu ứng di chuột hoàn hảo để thực hiện cho các thư viện ảnh. Nó không chỉ trông bắt mắt mà còn cung cấp một số ngữ cảnh cho người dùng
Xem Hiệu ứng di chuột hình ảnh bút – CSS3 của Bruno Rodrigues
Chuyển đổi hiệu ứng di chuột trên hình ảnh thực tế của Dimitra Vasilopoulou
Hãy tiếp tục, thử với ví dụ này và xem liệu bạn có thể giữ tầm nhìn thẳng không. Khi bạn di chuột qua các phần khác nhau của tòa nhà này, các khối sẽ dịch chuyển và cuộn dựa trên hướng con trỏ của bạn. Nó rất chi tiết, khó hiểu và gây kinh ngạc cùng một lúc. Chúng ta có thể làm điều đó một lần nữa?
Xem Hiệu ứng di chuột hình ảnh bút của Dimitra Vasilopoulou
Split Image Hover Effects của Dimitra Vasilopoulou
Muốn có thêm niềm vui thú vị? . Ở đây, bức ảnh dường như được chia thành một bố cục dạng lưới. Di chuột nhanh chóng đặt tất cả lại với nhau. Mặc dù nó không hoàn toàn gây ảo giác nhưng nó không kém phần ấn tượng
Xem Ảnh Chia Bút. Hiệu ứng di chuột của Dimitra Vasilopoulou
Hiệu ứng hình ảnh Pure Class với Pure CSS của Mahesh Ambure
Bộ sưu tập các hiệu ứng di chuột này chứng minh rằng bạn không cần phải quá giỏi để tạo ấn tượng mạnh. Có nhiều tùy chọn kiểu khác nhau ở đây, nhưng mỗi tùy chọn mang nội dung văn bản hiển thị và các bộ lọc khi di chuột. Và, không một dòng JavaScript nào được sử dụng
Xem Pen Awesome Image Hover in Pure CSS của MAHESH AMBURE
Key[frames] to the Wild của Vail Joy
Chúng ta đã đạt đến sự giao thoa giữa kịch tính và vẻ đẹp với hiệu ứng CSS “màn trập” đáng kinh ngạc này. Di chuột qua các hình minh họa động vật có tông màu nâu đỏ này sẽ tạo ra quá trình chuyển đổi cực kỳ mượt mà sang màu đầy đủ. Nó được thực hiện thông qua các bộ lọc CSS, khung hình chính, phần tử giả và thay đổi độ mờ
Xem Pen Animation @keyframes trong Image Hovers của Vail Joy
The Bigger Picture Image Hover Gallery của Shaw
Phòng trưng bày ảnh rất phổ biến, nhưng bạn không thấy nhiều nơi thực sự độc đáo. Đây là một ngoại lệ tuyệt đẹp. Di chuột qua hình ảnh thu nhỏ trong lưới và phiên bản có kích thước đầy đủ sẽ chiếm toàn bộ vùng chứa. Nhưng đó chỉ là một nửa của câu chuyện. Yếu tố thú vị thực sự đến từ việc hình ảnh tự “tách” và được đặt lại với nhau khi tải vào
Xem Bút Tách. Thư viện hình ảnh di chuột của Shaw
Tách hình ảnh tiết lộ hiệu ứng bởi Mark Mead
Ở đây chúng tôi có một kỹ thuật thú vị để tiết lộ văn bản đằng sau một hình ảnh. Đoạn mã này cho thấy nhiều cách khác nhau để "tách" một hình ảnh thành các dải, do đó dọn đường cho một thông điệp bí mật. Vì nó hơi phức tạp nên nó có thể không phải là thứ bạn muốn sử dụng nhiều lần trên một trang. Tuy nhiên, với việc triển khai phù hợp, bạn sẽ thêm nét tinh tế sáng tạo vào dự án của mình
Xem Pen Fancy Image Splitting [SplittingJS] của Mark Mead
Chúng tôi có bộ phim truyền hình
Thêm hiệu ứng di chuột ấn tượng vào trang web của bạn là một cách tuyệt vời để thu hút sự chú ý của người dùng. Điều mà các ví dụ trên cho thấy là chúng ta có thể đạt được kết quả mong muốn mà không cần quá nhiệt tình. Ít nhất thì bạn không cần thứ gì đó ồn ào và đáng ghét. Thay vào đó, đó là tất cả về quá trình chuyển đổi mượt mà và các hiệu ứng đặc biệt hấp dẫn