Features

  • Choose from a vast array of different hover effects
  • Opt to have a header included with your caption
  • Style the caption content's background and text (varies from effect to effect)
  • Choose a separate animation style for your revealed caption
  • Set a delay before the caption content is animated in
  • Choose to add a link to your image

Example

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.

Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi aliquet.

Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi aliquet.

Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi aliquet.

Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi aliquet.

Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi aliquet.

Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi aliquet.


Using Hover Image

General

Image
Allows you to drop in an image of your liking that the hover effect will be applied to.

Style
Choose from three different image styles: Standard, Rounded, Circular.

Alignment
Allows you to align your image to the left, center or right.

Effect
Choose from over 100 different hover animation effects to stylize your image.

Content

Header
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.

Caption
Enter your caption here, which will be seen when the image is hovered over.

Alignment
Allows you to align the content within your content area (includes the Header and Caption) to the left, center or right.

Content Effect
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.

Delay
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.

Content Colors
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.

Link

Include Link
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.

Advanced

Alt. Tag.
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.

Image Sizing

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:

  • Normal: Image is loaded as-is and is not scaled upwards in any way. It will scale down though to make sure it fits within the bounds of its parent stack(s).
  • Upscale to 100%: Forces the image to scale itself past its original size, enlarging itself to fill out the entire width of its parent container.
  • Max-Width: Set a maximum width for your image. The image will never scale up beyond this value but will still responsively scale downwards to ensure it fits within the bound of its parent container.
Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us