10 HIỆU ỨNG HOVER LÊN ẢNH VỚI CSS HTML

0
938

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 ta thấy chúng được sử dụng để làm nổi bật các liên kết văn bản hoặc các nút . 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 đồ sộ, hiệu ứng phù hợp có thể tạo ra tác động rất lớn.

Hôm nay, Hoang linh web 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ể làm gia vị cho các dự án của riêng mình theo cách ấn tượng.

1. HIỆU ỨNG CSS TẠO LỚP ẢNH MỚI KHI DI CHUỘT QUA ẢNH

Việc sử dụng CSS và JS thông minh này sẽ nhân đôi 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 mang lại hiệu ứng chất lượng điện ảnh mà khó có thể đạt được.

2. HIỆU ỨNG CSS TẠO MÀU ẢNH

Điều tuyệt vời về bộ sưu tập hiệu ứng di chuột này là chúng cung cấp sự hài lòng ngay lập tức. 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 mang hình ảnh màu nâu đỏ và thang độ xám đầy màu sắc khi di chuột.

3. HIỆU ỨNG CSS LÀM MẤT TIÊU ĐỀ KHI DI CHUỘT QUA ẢNH

Sự kết hợp của các thùng chứa chú thích xiên, kiểu chữ sắc nét và hình ảnh động nhanh là mạnh mẽ. Nó cũng gợi nhớ đến các khoản tín dụng mở đầu cho một chương trình truyền hình. Thật đáng ngạc nhiên, phần lớn công việc được thực hiện chỉ bằng CSS.

4. HIỆU ỨNG CSS HIỆN TIÊU ĐỀ KHI DI CHUỘT QUA ẢNH

Đây là một đoạn trích khiến mọi người phải chú ý đến việc chơi bài cho tất cả mọi người thấy. 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 phòng trưng bày ảnh . Nó không chỉ trông mát mẻ, mà còn cung cấp một số bối cảnh cho người dùng.

5. HIỆU ỨNG CSS LÀM THAY ĐỔI NÊN ẢNH

Đi trước, chơi xung quanh với ví dụ này và xem liệu bạn có thể giữ tầm nhìn của bạn thẳ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 dịch chuyển và cuộn dựa trên hướng con trỏ của bạn. Đó là rất chi tiết, khó hiểu và tâm trí tất cả cùng một lúc. Chúng ta có thể làm điều đó một lần nữa?

6. HIỆU ỨNG CSS THU NHỎ ANH KHI DI CHUỘT

Muốn vui vẻ hơn? Đây là một ví dụ khác từ Dimitra Vasilopoulou, người cũng đã tạo ra shifter thực tế ở trên. Ở đây, bức ảnh dường như được chia ra trong một bố cục lưới. Di chuột nhanh chóng đặt tất cả trở lại với nhau. Mặc dù nó không hoàn toàn như ảo giác, nhưng nó không kém phần ấn tượng.

7. HIỆU ỨNG CSS HIỆN THỊ TIÊU ĐỀ KHI DI CHUỘT QUA ẢNH

Bộ sưu tập các hiệu ứng di chuột này là bằng chứng cho thấy bạn không cần phải vượt trội để tạo ấn tượng mạnh mẽ.Có nhiều tùy chọn kiểu ở đây, nhưng mỗi tùy chọn mang lại nội dung văn bản và bộ lọc khi di chuột. Và, không một dòng JavaScript nào được sử dụng.

8. HIỆU ỨNG CSS ĐỔI MÀU NỀN ẢNH KHI DI CHUỘT QUA ẢNH

Chúng ta đã đến giao điểm của kịch và vẻ đẹp với hiệu ứng màn trập CSS CSS đáng kinh ngạc này. Di chuột qua các hình minh họa động vật tông màu nâu đỏ này tạo ra một sự chuyển tiếp cực kỳ mượt mà sang màu sắc đầ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ờ.

9. HIỆU ỨNG CSS PHONG TO ẢNH

Thư viện ảnh rất rộng rãi, nhưng bạn không thấy nhiều thứ 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 đủ chiếm toàn bộ vùng chứa. Nhưng đó chỉ là một nửa câu chuyện. Yếu tố tuyệt vời thực sự đến từ hình ảnh mà bộ chia tách bản thân và được đặt lại với nhau khi tải vào.

10. HIỆU ỨNG CSS CHIA ẢNH NHỎ KHI DI CHUỘT

Ở đây Hoang linh web giới thiệu một kỹ thuật thú vị để tiết lộ văn bản đằng sau một hình ảnh. Đoạn trích này cho thấy nhiều cách khác nhau để chia tách hình ảnh thành một dải, do đó dọn đường cho một tin nhắn bí mật. Vì nó hơi phức tạp, 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. Nhưng, với việc thực hiện đúng, bạn sẽ thêm một điểm nhấn sáng tạo cho dự án của mình.

TỔNG KẾT

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. Những gì 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. Bạn không cần một cái gì đó ồn ào và đáng ghét trong ít nhất. Thay vào đó, tất cả là về sự chuyển tiếp mượt mà và hiệu ứng đặc biệt hấp dẫn.

Hãy để những ví dụ này truyền cảm hứng cho bạn. Sau đó, thử nghiệm các cách để thêm một số bộ phim vào hình ảnh của riêng bạn.

LEAVE A REPLY

Please enter your comment!
Please enter your name here