Construct gorgeous hover effects for your images with this stack’s enormous selection of effects and overlays.
In this example we’ve placed several different Hover Image stacks within the Grid stack to allow you to see several different hover styles. These are just a very few of the many effects available in the Hover image stack. We’ve include more examples on the live Potion Pack preview page as well.
Allows you to choose between using a drag-and-drop image or a remote based image for your hover image. When you choose which type you'd like to use you'll be given the appropriate controls for adding your image — a drop zone image well or a link picker for your remote image.
Choose from three different image styles: Standard, Rounded, Circular.
Allows you to align your image to the left, center or right.
Choose from over 100 different hover animation effects to stylize your image.
Choose whether you would like to include a header with your image’s caption. The header, and caption, are shown when the visitor hovers over the image.
Enter your caption here, which will be seen when the image is hovered over.
Allows you to align the content within your content area (includes the Header and Caption) to the left, center or right.
Apply one of a dozen different animation effect settings to your content (the caption and optional header). This animation happens as the main animation effect is applied.
Choose to add a brief delay between when the main hover animation effect happens and when the Content Effect occurs. Altering the delay can produce different styles of effects.
Set your content sections background and text colors to match your site style.
Center Content Vertically
Allows you to vertically center the content within the image overlay.
When enabled this feature adds an icon on top of your image to indicate that the visitor can interact with this image by hovering over it.
Allows you to choose from a variety of different Font Awesome based icons for your indicator.
Allows you to adjust the size of the icon.
Adjust the color of both the background and icon.
Width & Height
Provides you the ability to adjust the size of the indicator.
You can choose to place the indicator in various locations on top of your image, aligning it to the left, right or center horizontally, as well as the top, middle or bottom vertically.
Allows you to set border radius for the corners of your indicator icon. You can set all corners uniformly or adjust them on a corner-by-corner basis.
Opt to include a link on your image. When enabled you can choose to link to either an internal page or an external web address.
Provides you a way to add an Alt. Tag to your image. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.
This feature allows you to choose how Foundry displays your image when it comes to responsive sizing. You can choose to have the image display normally, as-is and only scale downwards when the image would otherwise begin to overflow the bounds of its parent container or you can choose one of the following:
While the Hover Image stack creates some beautiful, interactive thumbnails for your page, don't overdo it. Too many Hover Image stacks can be overwhelming for your visitors.