Áp dụng các cho tất cả hình ảnh hoặc hình ảnh bạn càn làm hiệu ứng.
Code: chèn trước thẻ ]]></b:skin> trong template
Grayscale
img {
-webkit-filter:grayscale(1);
}
img:hover {
-webkit-filter:grayscale(0);
}
Saturate
img {
-webkit-filter:saturate(4);
}
img:hover {
-webkit-filter:saturate(1);
}
Sepia
img {
-webkit-filter:sepia(1);
}
img:hover {
-webkit-filter:sepia(0);
}
Hue Rotate
img:hover {
-webkit-filter:hue-rotate(360deg);}
Invert
img {
-webkit-filter:invert(1);
}
img:hover {-webkit-filter:invert(0);
}
Brightness
img {
-webkit-filter:brightness(-0.5);}
img:hover {-webkit-filter:brightness(0);
}
Hue-rotate and Animate
@-webkit-keyframes hue {
100% { -webkit-filter:hue-rotate(360deg); }
}
img:hover {
-webkit-animation:hue 1s linear infinite;
}
Grayscale and Brightness
img {
-webkit-filter:grayscale(1) brightness(-0.4);
}
img:hover {-webkit-filter:grayscale(0) brightness(0);
}
Demo
Grayscale
Saturate
Sepia
Brightness
Đăng nhận xét