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

Hình ảnh là một trong những yếu tố hấp dẫn nhất của trang. Với việc sử dụng một số hiệu ứng mượt mà của hình ảnh sẻ làm cho trang web của bạn trong hấp dẫn hơn. Ở đây, sử dụng thuộc tính opacity kết hợp với jQuery.

Demo

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

Ban đầu hình ảnh được tải lên với opacity 0.5
Tiếp theo sử dụng sự kiên hover, thay đổi độ trong suốt lên 1.0 khi mouseover và 0.5 khi mouseout
jQuery code:

$(document).ready(function() {
    $("#HoverEffect").css("opacity", 0.5);
    $("#HoverEffect").hover(function() {
        $(this).animate({opacity: 1.0}, 500);
    }, function() {
        $(this).animate({opacity: 0.5}, 500);
    });
});

Sử dụng bằng cách thêm id="HoverEffect" vào thẻ <img>

<img src="hinh-anh.JPG" id="HoverEffect" />