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.