Hover Cards

This widget allows users to create 2 separate cards in a single widget... the second of which will only be revealed when hovering over the first.

No individual field is required, however one field must be filled out in order to save. For each card, users may select the following:

  • Image
  • Caption (wysiwyg)
  • Background/text combo
  • Y-axis text alignment (X-axis can be done via text justification in the wysiwyg).

The background/text combo will mimic that of the advanced options in our Hero Image widget.

  • Black text / No background
  • Black text / White transparent background
  • Black text / White opaque background
  • White text / No background
  • White text / Black transparent background
  • White text / Black opaque background

NOTES:

  • If no image is chosen for the second card, the image in the first card will automatically show for the second card.
  • DEV IMPORTANT: With this HTML + CSS markup, it's important that the div.t-hoverCardContent must always show, even if the user types no text in the wysiwyg. This is so that they can still have the option for background colors over their image.
  • All links in wysiwyg will be underlined, since the color will match that of the users choice. We need to differentiate it from the rest of the body text.
  • ATWEB IMPORTANT: If a user chooses 2 different images for card one and card 2, they should be the same size to avoid any display funkiness. We can remedy this by injecting javascript here, it just adds a bit of bloat to the widget. We can discuss this at Design Review.
  • ATWEB IMPORTANT: If a user includes too much text, it will run outside of the image box. This widget could have been designed so that the image would grow along with the height of the text box. However, doing so would zoom the image and crop it on the sides. This would not be in line with the original client's example.

 

Example One

Image + Caption > Image + Caption

  • Card One: White text, Black transparent background
  • Card Two: White text, Black transparent background
Image One

Rad Editor Content

This is the first main card content. It is the RAD editor, so users can basically put whatever they want in here. No text fields are required at all.

Image Two

This is the Rad Editor


Isn't it rad?


It's so rad.

Example Two

Image + Caption > Image + Caption

  • Card One: Black text, No background
  • Card Two: Black text, White transparent background
Image One

First Title Field

This is the first main card content. It is the RAD editor, so users can basically put whatever they want in here. No text fields are required at all.

Image Two

Second Title Field

This is the second main card content. It is also RAD editor, but this content is only revealed on hover.

This is a link field.

Example Three

Image > Image + Caption

  • Card One: None
  • Card Two: White text, Black transparent background, Text centered
Image One
Image Two

Second Title Field

This is the second main card content. It is also RAD editor, but this content is only revealed on hover.

This is a link field.

Example Four

Image > Image + Caption

  • Card One: None
  • Card Two: Black text, White opaque backround, Text bottom
Image One
Image Two

Second Title Field

This is the second main card content. It is also RAD editor, but this content is only revealed on hover.

This is a link field.
CMS Login