hover image

Darken Image on hover

Here we have -webkit-filter: brightness(100%); in img again as initial state and than by adding -webkit-filter: brightness(0%); to :hover we trigger the change. and of course again you can set up the filters % to your needs.

Blur Image on hover 

Again in the img we use the transition but this time in the :hover we have added a filter -webkit-filter: blur(5px); changing the 5px to more or less will change the blur strength.

Drop shadow Image hover
css effect For drop shadow we use -webkit-filter: drop-shadow(10px 7px 1px grey)

Hue-rotate Image on hover
In this cool example we have added the filter -webkit-filter: hue-rotate(333deg);