EverWeb Widgets

Image FX

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

Slide Down Overlay

A transparent overlay with a heading, info text and a link tab slides down over the image on hover. The effect requires a tap on touch devices.
The link can be to an internal page or to an external one with the option to open in a new window on computers.
The widget has the option to make it responsive with a maximum width setting.

Info Overlay On Click

A fade in image overlay when an info button is clicked. The info button can be positioned top or bottom and left or right.
The info overlay has a heading and text and an optional CTA style link tab which can be configured as an internal or external hyperlink.

Hover Image Caption

The caption animates in when the image is hovered when viewed on computers. When the page is loaded on a touch device like an iPad, the caption is visible.
The image can be styled with a border and/or box shadow and can be a hyperlink to an internal or external page with a new window option.

Zoom In On Hover

The image has a scale transition on hover so that the image enlarges within the container when the cursor is over it. The scale amount and the animation time can be adjusted.
The image can be configured as an internal or external link with a new window option.
The container can be styled with a border, corner radius and box shadow if required.

Hover Link & Scale

The image has a centered overlay link which appears on hover when viewed on computers. When the page is viewed on tablet devices, the link is visible on page load.
The is also a slider for adding a scale effect to the image on hover and the image can be styled with rounded corners and a box shadow and/or border.

Image Flip

The image flips on the X or Y axis on hover or on click for mobile devices. The reverse side has a heading and a paragraph for more info about the image content.
When used in hover mode, there is an option for a CTA link tab which can be configured as an internal or external link with new window option.

Crossfade On Hover or Click

Two images are stacked one on top of the other. They can be set to crossfade on hover or on click on computers and by tapping on Touch devices.
The transition time can be set to create a smooth transition from one image to the other.

Scroll To Fix Image

The image will scroll up the page with the rest of the content until it reaches a predetermined distance from the top of the browser where it will stick.
The image is inserted in an HTML5 figure element so that it can have a caption as well as alt text.
The image can be created as a hyperlink to an internal or external page with the option to open in a new window.

Fade Out On Scroll

The image fades out when the browser window is scrolled down by a preset amount and fades back in on scrolling up.
The image can be made fully responsive by checking the "Full Width" box in the Metrics and setting a maximum width. It can also be set up as a full width, fixed height image.

Product Color Options

The widget is used to display the color options of a product. The different colors are navigated using coloured "swatch" tabs.
It can accommodate up to eight images and there are options for adding a heading for the product name and descriptive text.

Image Map Hot Spot

The square or round hot spot is placed on an image and opens a tooltip when hovered on computers and tapped on touch devices.
The tooltip content can be an image with alt text and optional caption or text. There is a choice of animation types and the animation delay can be adjusted.

Hover Overlay Grid

A responsive image grid with hover overlay effect. When viewed on computers, the images scale up and show an overlay with caption and link on hover. On touch devices where hovers don't work, the overlay is permanently on.
The widget has options for adding a text block with heading and a footer with auto copyright update and smooth scroll to the top tab to create a fully responsive page.

© EverWeb Widgets -