Core Code
Core Code Modern Dev Handbook

Filter Hover Effect

Filters can change on hover for interactive effects.

Preview

Code

<style>
img{
width:140px;
filter:grayscale(100%);
transition:filter 0.3s;
}

img:hover{
filter:grayscale(0);
}
</style>

<img src="https://via.placeholder.com/140">

More CSS Image Filters Examples (8)

example Basic Image Filter open example example Blur Filter open example example Brightness Filter open example example Contrast Filter open example example Sepia Filter open example example Saturate Filter open example example Invert Filter open example example Drop Shadow Filter open example