The new version 1.2 of the CaptionOnImage Stack introduced a lot new options as requested by users:

  • caption position: cover (with vertical alignment)
  • moving caption (up/down, left/right)
  • slide caption in/out (from/to the left/right/top/bottom)
  • links can be used in the caption
  • zoom image in effect
caption styling for static and hover:
text colors
link colors and underlining
background color
border (width, style, colors, position inside/outside, radius)
CaptionOnImage Stack

Caption­On­Image Stack

show a caption on top of an image

Showing a caption text below or above an image is dead easy, and so is a caption next to an image. But how about a caption on top of an image? With the CaptionOnImage Stack, it’s also as simple as ABC. The many styling options (see fig. 1), and the option to make the whole combination of image and caption a link make this a very versatile stack. Use it on its own, or in a grid (with my SmartColumns2 Stacks for example) to present a portfolio (demo), image galleries, links…

Demo
an image

to the demo page

Stacks Image 214042

to the demo page

An image…

…and a caption.

The result.


Visit demo page #1 for many more examples, showing the various options of this stack.
With a little creativity, you can use the CaptionOnImage Stack with two different images, optionally with a caption text too! Demo page #2 shows some examples, and detailed instructions how to achieve this.
Demo page #3 shows an example of a portfolio page built with CaptionOnImage Stacks inside SmartColumns2 Stacks.
On demo page #4 are some examples of the use of external ‘warehoused’ images.

Usage

Just drag an image into the upper drop zone, or set the url of the image in case of a warehoused image, and drag a stack that can contain text into the lower drop zone (fig.2).
You can style the caption in the text stack, but text color, links, background color and/or borders can also be styled in the CaptionOnImage Stack. This is especially useful when you want different styling of the caption when hovering over the stack. All other styling is done in the CaptionOnImage Stack.

NB
  • When using a responsive theme, you may need to select force fluid image in the HUD to make the image full width.
  • When using the option caption position: center, set a background in this stack, not in the (text) stack for the caption — unless you have something special in mind.
  • You can set a link for the whole stack, or use links in the caption, but you cannot use both at the same time.
  • When using the text color, link styling, background color and/or border settings for the caption, don’t apply that styling in the stack that contains the caption text.
    These settings are meant for the stacks that can contain text that came with the Stacks plugin (Text stack, Markdown stack, etc.). They are not guaranteed to work properly with every third party stack.

Need help using it on a non-stacks page? Here’s a tutorial.

Limitations
  • The image effect blur does not work in Internet Explorer (any version); grayscale and sepia do not work in Internet Explorer and Edge (any version).
  • Zoom image does not work in Internet Explorer 10 and worse.
  • With certain combinations of text color, background color and font family, the caption text may look a little blurry when using the option caption position: center. It’s not your eyes, it’s what some browsers do.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
CaptionOnImage Stack (edit mode)
fig. 2
CaptionOnImage Stack HUD
Stacks Image 214082
fig. 1
© 2012-2017 Marathia Web Design | Contact