Giới thiệu

CSS là một công cụ rất quan trọng trong việc tạo ra các hiệu ứng trên trang web. Hiệu ứng “hover” là một trong những hiệu ứng phổ biến nhất trong CSS3. Khi người dùng di chuột qua một phần tử, chẳng hạn như một hình ảnh, hiệu ứng “hover” sẽ được kích hoạt và sẽ thay đổi giao diện của phần tử đó. Trong bài viết này, chúng ta sẽ tìm hiểu về cách tạo hiệu ứng “hover” cho ảnh trong CSS3.

1. Tạo hiệu ứng “Hover” đơn giản

Cách đơn giản nhất để tạo hiệu ứng “hover” cho ảnh là sử dụng thuộc tính :hover trong CSS. Ví dụ, để thay đổi kích thước của một ảnh khi di chuột qua nó, ta có thể sử dụng mã CSS như sau:

img:hover {
  width: 300px;
}

Trong đoạn mã trên, khi người dùng di chuột qua ảnh, chiều rộng của ảnh sẽ được thay đổi thành 300px. Bạn có thể thay đổi thuộc tính khác trong CSS để tạo ra các hiệu ứng khác nhau.

2. Thêm hiệu ứng chuyển động

Ngoài việc thay đổi kích thước hoặc màu sắc của ảnh, chúng ta cũng có thể thêm hiệu ứng chuyển động vào hiệu ứng “hover”. Ví dụ, để làm cho ảnh phóng to một cách mượt mà khi di chuột qua nó, ta có thể sử dụng mã CSS như sau:

img:hover {
  transform: scale(1.2);
  transition: transform 0.2s ease-in-out;
}

Trong đoạn mã trên, thuộc tính transform sẽ phóng to ảnh lên 1.2 lần kích thước gốc của nó. Thuộc tính transition sẽ tạo ra hiệu ứng chuyển động mượt mà khi di chuột qua ảnh. Bạn có thể thay đổi giá trị của thuộc tính transition để tạo ra các hiệu ứng chuyển động khác nhau.

3. Thêm độ mờ cho ảnh

Ngoài thay đổi kích thước và chuyển động, chúng ta cũng có thể thêm độ mờ cho ảnh khi hiệu ứng “hover” được kích hoạt. Ví dụ, để làm cho ảnh trở nên mờ đi khi di chuột qua nó, ta có thể sử dụng mã CSS như sau:

img:hover {
  opacity: 0.7;
}

Trong đoạn mã trên, thuộc tính opacity sẽ làm giảm độ rõ nét của ảnh đi 30% khi di chuột qua nó. Bạn có thể thay đổi giá trị của thuộc tính opacity để tạo ra các hiệu ứng khác nhau.

Kết luận

Hiệu ứng “hover” là một trong những công cụ quan trọng nhất để tạo ra các hiệu ứng trên trang web. Bằng cách sử dụng CSS3, chúng ta có thể tạo ra các hiệu ứng độc đáo cho ảnh của mình. Hy vọng bài viết này đã giúp ích cho bạn trong việc tạo hiệu ứng “hover” cho ảnh trong CSS3.