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" />

Giả lập hiệu ứng ảnh hồng ngoại (IR Photo)

Chụp ảnh hồng ngoại (Infrared Photo) là kỹ thuật chụp ảnh mà ánh sáng sẽ không thể nhìn thấy được bằng mắt thường. Hồng ngoại (IR) nằm giữa ánh sáng quang phổ nhìn thấy và sóng vô tuyến.

Đây là một loại ảnh chụp bằng tia hồng ngoại, hình ảnh của nó thu được sẽ gây ra những gam màu cực kỳ ấn tượng

Ban đầu

Kết quả

Bắt đầu thực hiện :)

Bước 1 :

Nhân đôi background layer thành 1 layer copy background

Ấn Ctrl+I để invert layer này , chọn blending mode là color , ta sẽ được kết quả tạm thời như sau :

Bước 2 :
Vào Channel Mixer rồi điều chỉnh 2 kênh Red và Blue lần lượt như sau :

Bước 3 :
Vào Hue/Saturation , chọn kênh Red , giảm saturation xuống -100 , tăng Lighness +57

Kết quả:

Bước 4 :
Tạo 1 layer PhotoFilter
Mã màu |LBB| Density |39| Blending mode |Normal|

Thành quả cuối cùng của ta đạt được:

Một vài kết quả khác: