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

Hiệu ứng Opacity 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

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

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);}