×

Hiệu ứng Hover cho hình ảnh khi đưa chuột vào

Hiệu ứng Opacity thay đổi độ trong suốt

Ví dụ:
Đưa chuột vào thì lập tức hình ảnh thay đổi độ trong suốt.

Cấu trúc html như sau

<img class="opacity" title="Hình ảnh" src="hinh-anh.jpg" />

CSS tạo hiệu ứng

.opacity:hover{opacity:0.6} /* 0.6 là điều chỉnh thông số thông suốt  */

Hiệu ứng thay đổi hình ảnh thành đên trắng

Ví dụ:
Đưa chuột vào thì lập tức hình ảnh thay đổi sang đen trắng.

Cấu trúc html như sau

<img class="black" title="Hình ảnh" src="hinh-anh.jpg" />

CSS tạo hiệu ứng

.black:hover{filter: grayscale(100%);}

Hiệu ứng blur khiến hình ảnh trở nên mờ đi

Ví dụ:
Đưa chuột vào thì lập tức hình ảnh trở nên mờ hơn.

Cấu trúc html như sau

<img class="blur" title="Hình ảnh" src="hinh-anh.jpg" />

CSS tạo hiệu ứng

.blur:hover{filter: blur(5px);}
2213
Bài cùng chủ đề
×
Chia sẻ trang này tới
QR: Hiệu ứng Hover cho hình ảnh khi đưa chuột vào