EverWeb Widgets

Image FX 2

These EverWeb Widgets add hover and click (or tap) effects to images.
Hover effects are not much use nowadays since they don't working on touch devices such as the iPad and iPhone. Where possible, a tap option has been added for mobile devices.
NOTE: If a widget offers a hover effect without a tap/click option, it should only be used on the full version of the site and when there is a separate version for tablet devices.
Click any widget icon to see the demo …

View CartAdd To Cart

CSS Image Filter Demo

Sometimes, it is easier to add effects to an image in EverWeb rather than applying them prior to import. The effect can be chosen can be adjusted in relation to the other content.
CSS filters are derived from their SVG equivalent and will now work in all modern browsers. The demo page shows examples of the different effects.

CSS Filter Effects

The widget applies any one of nine available effects to an image The image can have an optional overlay, centered caption with variable background opacity.
The image is inserted in an HTML5 figure element which can be styled for background with adjustable opacity and padding and can have a border and/or a box shadow.

Filter Effects On Hover

The widget applies any one of nine available effects to an image on hover. The image can have an optional overlay, centered caption with variable background opacity.
The image is inserted in an HTML5 figure element which can be styled for background with adjustable opacity and padding and can have a border and/or a box shadow.

Hue Rotate Animation

The animation is created by rotating the hue angle over time. The "rotate to " angle is set in degrees and the time taken to complete one cycle is set in seconds. The cycle can be repeated to a finete number or set to infinite.
The image is inserted in an HTML5 figure element with optional caption. The container can be styled and the image configured as a hyperlink with new window option.

Image Flip X, Y or Z

The animation works on either hover or click to flip from the front to the back image. The image can be flipped on the X or Y axis and the direction can be reversed. There is a third option to flip on the Z index which gives quite an unusual effect!
Both images can have centered overlay captions with variable background opacity.

Hover Info Overlay

The image scales up on hover with an overlay which includes a caption and a CTA style link tab. The link can be to an internal or external page and open in a new window if required.
There is a checkbox to allow the overlay to show with reduced opacity when the page is viewed on a touch device like an iPad or iPhone.

Scale Out On Click

The image breaks out of its container and scales up/down on click. The scale amount is set by entering an amount like 1.66, 2.03 etc.
The image has an optional centered overlay caption which disappears when the image is scaled up. The container can be styled with a border and/or box shadow and the image can be rotated if required.

Scale Out On Hover

The image breaks out of its container and scales up/down on hover in and out. The image can be configured as a hyperlink to an internal or external page with a new window option if requires.
The image has an optional centered overlay caption which disappears when the image is scaled up. The container can be styled with a border and/or box shadow and the image can be rotated if required.

Scale In On Click

The image expands within its container and scales up/down on click. The scale amount is set by entering an amount like 1.66, 2.03 etc.
The image has an optional centered overlay caption which disappears when the image is scaled up. The container can be styled with a border and/or box shadow and the image can be rotated if required.

Scale In On Hover

The image expands within its container and scales up/down on hover in and out. The image can be configured as a hyperlink to an internal or external page with a new window option if requires.
The image has an optional centered overlay caption which disappears when the image is scaled up. The container can be styled with a border and/or box shadow and the image can be rotated if required.

Overlay On Hover & Click

The image is inserted in a figure element with an overlay. The overlay color and opacity can be adjusted for both the on load and on hover state. There is an option for adding click or tap on mobile devices.
The image has an option for an overlay caption and the container can be styled and configured as an internal or external hyperlink with new window option.

© EverWeb Widgets -