Hover card widget

About



The hover card looks similar to a card or enhanced card but allows up to two images to be uploaded. Instead of linking to additional content like other cards, the card is able to display additional content on the same page. Initially, the first card content displays. When the card is hovered over using a mouse, the image interactively changes to show the content of the second card.

Design


 

Woman sitting on top of a mountain looking at the landscape
Hover card example
Welcome_to_atWeb_2
This is the hover card with a second image selected. 

How to



Drag the hover card widget from the right column onto your page. Click Edit.


Hover card - drag and drop

 

For the default view (or card 1), select an image and enter the text you would like to display. You also have the ability to adjust the text alignment and color and with a background color. 

 

Hover card - card 1 settings


 

Next, select an image and enter the text you would like to display for the hover view (or card 2). Again, you also have the ability to adjust the text alignment and color and with a background color. NOTE: If no image is chosen for the second card, the image in the first card will automatically show for the second card.

 

Hover card - card 2 settings

Additional Information


Tips

•  Use card widgets to highlight specific content, not for all the content on your page.

•  Do not include too much text; it will run outside of the image box.

•  If you choose 2 different images for card 1 and card 2, they should be the same size to avoid any visual issues with the display.

•  Limit the number of card widgets on a page to avoid clutter.