Hiệu ứng Hover hình ảnh sử dụng thuộc tính opacity trong CSS3

Trước đây để thêm một hiệu ứng đặt biệt nào đó cho hình ảnh, liên kết,... chúng ta phải sử dụng Javascript hay jQuery. Từ khi CSS3 đời thì các công việc như thế này trở nên đơn giản hơn rất nhiều.
Hôm nay tôi sẽ hướng dẫn làm thế nào để thay đổi giá trị opacity (hiểu đơn giản là độ mờ của đối tượng) của một hình ảnh và thêm hiệu ứng hover (di chuột) bằng cách sử dụng CSS3. Xem ví dụ dưới đây, bạn sẽ thấy rằng khi bạn di chuyển con trỏ chuột lên ảnh, nó sẽ có hiệu ứng.

Thuộc tính opacity trong CSS3

Hiệu ứng hover ảnh với thuộc tính Opacity và jQuery

Nếu bạn biết HTML và CSS3 thì việc tạo hiệu ứng như thế này là rất đơn giản, nhưng nếu bạn là một newbie bạn vẫn có thể làm điều đó một cách dễ dàng. Trong hướng dẫn này, tôi sẽ hướng dẫn thế nào để có hiệu ứng di chuột như vậy.
Để thực hiện, thêm một đoạn CSS sau vào template của bạn.

img.hovereffect {
 opacity: 0.5; //giá trị 0.5 làm cho hình ảnh rõ ràng hơn hoặc mờ đục
 -webkit-transition: all .3s linear; //3s thời gian thực hiện hành động
 -moz-transition: all .3s linear;
 -o-transition: all .3s linear;
 transition: all .3s linear;
}
img.hovereffect:hover {
 opacity: 1;
}

Để sử dụng, chỉ cần khai báo thêm class="hovereffect" vào thẻ <img ... /> của hình ảnh mà bạn muốn sử dụng hiệu ứng này.
Ví dụ:

<img class="hovereffect" src="http://example.com/picture.jpg" />

Đây là một ví dụ cơ bản trong việc tạo hiệu ứng bằng CSS3, với sức mạnh của CSS3 thì bạn có thể làm rất nhiều hiệu ứng đẹp khác, bạn có thể download tài liệu học CSS3 để tìm hiểu thêm.