image hover filter effect
Click For Demo Page

CSS Image Filter On Hover

The widget inserts an image in an HTML5 figure element with optional figcaption. The image can be configured as a hyperlink to open an internal or external page and open in a new window if required.
The container can be styled with padding, background color and opacity and have a border and/or a box shadow.
The effect occurs on hover and the caption disappears. The hover transition time can be set in milliseconds to give a smoother transition between the on load and hover states - and vice versa.
The available effects are …
blur | brightness | contrast | grayscale | hue-rotate | invert | opacity | saturate | sepia
The effect used on the image on this page is 100% greyscale with a transition time of 500ms.

Click the image above to see examples of the various effects.

NOTE: Use only one effect per image.
Some effects - such as brightness - won't show in EverWeb so it is important to test the final result in the browser.

EverWeb Widgets